安装node.js
官网下载最新版本安装
命令行输入 npm -v 出现版本号即为安装成功
安装webpack
npm install webpack -g
输入webpack -v 出现相应版本号即为安装成功
安装vue-cli
npm install vue-cli -g
输入webpack -V 出现相应版本号即为安装成功（该处为大写字母V）
通过vue-cli初始化项目
在projectName（项目名）文件夹下来放置项目
vue init webpack projectName(项目名)
vue-cli初始化项目
vue init webpack projectName————
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。它极大地简化了 Vue 开发的配置过程，让开发者能够更专注于编写应用程序本身。以下是对搭建 Vue 项目过程中涉及的知识点的详细说明：
1. **Node.js 安装**：
首先需要确保已经安装了 Node.js，可以从官方网站下载最新版本进行安装。安装完成后，在命令行中输入 `npm -v`，如果显示出版本号，就表明 Node.js 已经安装成功。
2. **Webpack 安装**：
Webpack 是一个模块打包器，用于处理前端资源，如 JavaScript、CSS、图片等。在全局安装 Webpack 可以通过命令 `npm install webpack -g`。之后运行 `webpack -v` 来验证安装是否成功，显示版本号即表示安装成功。
3. **Vue CLI 安装**：
Vue CLI 提供了一个可扩展的命令行界面，用于快速设置 Vue 项目。使用 `npm install vue-cli -g` 进行全局安装，然后输入 `vue -V`（注意这里是大写的 'V'）检查版本，确保安装成功。
4. **Vue CLI 初始化项目**：
使用 Vue CLI 初始化项目，需进入项目所在的文件夹，然后执行 `vue init webpack projectName`，这里的 `projectName` 是你希望的项目名称。在执行过程中，系统会提示一系列配置选项，包括但不限于：
- **项目名称**：必须遵循文件命名规范，不能包含空格或大写字母。
- **项目描述**：对项目的简单描述，方便后期维护。
- **作者**：项目创建者的名称。
- **Vue build**：选择构建方式，一般选择 `standalone`，包含完整的 Vue 库。
- **vue-router**：是否集成 Vue Router，通常在单页面应用中会需要。
- **ESLint**：是否启用代码风格检查工具 ESLint。如果初学者觉得 ESLint 的规则过于严格，可以选择不安装。
- **单元测试**：是否使用 Karma 和 Mocha 设置单元测试，根据项目需求决定。
- **端到端测试**：是否使用 Nightwatch 进行端到端测试，同样根据实际需求选择。
5. **安装依赖**：
初始化完成后，进入新创建的项目文件夹，运行 `npm install` 或 `yarn` 命令来安装项目所需的依赖包。
6. **运行项目**：
安装完依赖后，可以使用 `npm run serve` 或 `yarn serve` 启动开发服务器，进行实时预览和开发。
7. **项目结构**：
Vue CLI 初始化的项目通常包括以下文件夹和文件：
- `src`：源代码目录，包含 `assets`（静态资源）、`components`（组件）、`views`（视图）、`router`（路由）、`store`（Vuex状态管理）等。
- `public`：公共目录，通常存放静态文件，如 favicon 图标。
- `index.html`：项目的入口 HTML 文件。
- `package.json`：项目的配置文件，记录依赖和脚本命令。
8. **配置文件**：
项目中的 `vue.config.js` 可以自定义 Vue CLI 的构建设置，例如修改端口、添加代理等。
9. **构建与部署**：
当开发完成，可以使用 `npm run build` 或 `yarn build` 命令将项目打包，生成的文件位于 `dist` 目录下，可以直接部署到生产环境。
通过以上步骤，你就成功地使用 Vue CLI 搭建了一个 Vue.js 项目。随着项目的深入，你可能还需要了解 Vue.js 的组件化开发、Vuex 状态管理、axios 网络请求库以及 Vue Router 路由管理等核心概念和技术。
