1.准备阶段
准备阶段会将项目环境配置完毕,包含node、npm、webpack和vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。
1.安装node或者更新node版本
①从node.js中文网下载并安装nodejs点击下载.msi的32/64位安装包，然后双击本地文件一路点击下一步完成nodeJs的安装即可。注意安装8.10以上版本哟!
②第一步，先查看本机node.js版本：
node -v
第二步，清除node.js的cache：
sudo npm cache clean -f
第三步，安装 n工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 “n”
sudo npm install -g n
第四步，安装最新版本的node.js
sudo n stable
安装完成后，打开命令行工具，输入node -v，如下：
liushenghua@liushenghuadeMacBook-Pro ~> node -v
v10.15.3
liushenghua@liushenghuadeMacBook-Pro ~> npm -v
6.4.1
更新npm最新版本
sudo npm install npm@latest -g
2.安装webpack
注：以下所有npm操作，由于国内速度较慢甚至出现失败，可用淘宝镜像cnpm替代。下列所有npm命令，用cnpm替代即可。方式如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
继续刚才的命令行工具，输入npm install webpack -g，-g代表全局安装。安装完成后继续输入webpack -v，出现相应版本号，代表安装成功。
我在安装时出现如下状况：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
解决方案是：输入npm install webpack-cli -g。安装成功后执行webpack -v查看版本号
3.安装vue脚手架vue-cli
继续上面的命令行工具。接下来就是安装配置今天的主角了，vue脚手架工具vue-cli。方法一样，键入命令行npm install vue-cli -g全局安装，然后输入vue -V注：是大写的-V检测是否安装成功。如下：
liushenghua@liushenghuadeMacBook-Pro ~> vue -V
2.9.6
4.小结
目前主要完成的是node、npm、webpack和vue-cli四个工具的环境配置。版本号如下，不必一致。
liushenghua@liushenghuadeMacBook-Pro ~> npm -v
6.4.1
liushenghua@liushenghuadeMacBook-Pro ~> node -v
v10.15.3
liushenghua@liushenghuadeMacBook-Pro ~> webpack -v
4.29.6
liushenghua@liushenghuadeMacBook-Pro ~> vue -V
二、项目搭建
本阶段讲述vue-cli项目搭建及相关配置，包含创建项目、修改基础配置、项目运行三个模块，可自行选择阅读或跳过。
1.项目创建
打开命令行工具，cd到该文件目录下,建立一个空文件夹。例如在Desktop下面建一个vueProject,cd Desktop,mkdir vueProject,cd vueProject，最好以纯英文命名。，执行vue init webpack name，name可替换为你要创建的项目名。回车之后，会要求输入一系列的信息，大部分可直接回车略过，注释如下，没有注释的回车略过即可：
? Project name sunseavue//项目名
? Project description A Vue.js project//项目描述
? Author Shenghua Liu <liushenghua@sunseagroup.com>//作者
? Vue build standalone
? Install vue-router? Yes//项目路由
? Use ESLint to lint your code? NO//不开启ESLint语法检测 开启到时候会报错
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) n
pm
vue-cli · Generated "sunseavue".
最后一步选择npm或者yarn则会自动执行npm install安装项目所有依赖包。不选择的话，自己安装也是同样效果。安装步骤为：
1.cd到项目路径；
2.执行npm install；
3.等待完成安装即可;
2.项目介绍
cd到该项目，或者打开文件夹，项目目录及备注如下：
├── project //项目目录
│ ├── build //webpack相关配置
│ │ ├── build.js //生产环境构建
│ │ ├── check-versions.js //版本检查
│ │ ├── utils.js //构建相关工具
│ │ ├── vue-loader.conf.js //处理vue文件的配置信息
│ │ ├── webpack.base.conf.js //webpack基础配置
│ │ ├── webpack.dev.conf.js //webpack开发环境配置
│ │ ├── webpack.prod.conf.js //webpack生产环境配置
│ ├── config //vue基本配置
│ │ ├── dev.env.js //开发环境配置
│ │ ├── index.js //主要配置
│ │ ├── prod.env.js //生产环境配置
│ │ ├── test.env.js //测试环境配置
│ ├── node_modules //依赖包 忽略
│ ├── src //项目核心文件
│ │ ├── assets //静态资源 如公用js\css\image\媒体资源等
│ │ ├── components //公用组件
│ │ ├── router //项目路由
│ │ │ ├── index.js //路由控制文件
│ │ ├── App.vue //根组件
│ │ ├── main.js //入口文件
│ ├── static //静态资源
│ ├── test //模拟测试
│ ├── .babelrc //babel参数
│ ├── .editorconfig //代码格式
│ ├── .gitignore //git上传相关配置
│ ├── .postcssrc.js //css相关工具
│ ├── index.html //主页
│ ├── package-lock.json //记录当前状态下实际安装的各个npm package的具体来源和版本号
│ ├── package.json //项目信息
│ ├── README.md //项目说明
3.启动项目
命令行工具键入npm run dev，等待片刻，直到启动成功
如果失败可以用cnpm i重新安装依赖。
