vue-cli2项目搭建和启动

1. 首先安装node.js，安装过程就不介绍了。安装好后通过 node -v命令检查是否安装成功，出现版本号则表示安装成功

2. 安装webpack，在cmd中执行npm install webpack -g命令全局安装，出现下图则表示安装成功

3. 接下来通过npm install -g vue-cli安装vue-cli，网上有说安装国内的淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org这样下载速度会快，因为npm的服务器在国外

我在安装vue-cli会报下图的错误，

此时需要清理缓存，命令：npm cache clean --force，然后重新安装，出现下图则表示安装成功

4. 开始搭建vue项目，项目名称叫myvuework（项目名不能有大写）

打开cmd进入项目存放的磁盘（我放在e盘），然后执行vue init webpack myvuework

参数解释：

• Project name (vuetest)项目名称，可以自己指定，也可直接回车，按照括号中默认名字。
• Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字。
• Author作者，可以自己指定，也可直接回车。
• Runtime + Compiler: recommended for most users 运行加编译，选推荐
• Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅运行时，已经有推荐了就选择第一个了
• Install vue-router? (Y/n)   是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
• Use ESLint to lint your code? (Y/n)    是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行。
• Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试。如果需要对项目最小的单元进行测试是否可用着安装这个，项目中会有个test文件夹
• Setup e2e tests with Nightwatch(Y/n)?    是否安装e2e测试。

然后就等待执行完成，出现下图则表示项目搭建完成

在对应的文件夹位置会出现以下文件

5. 编译项目，进入项目存放的路径，通过命令：npm run build

出现下图则表示编译完成：

6. 启动项目，进入项目存放的路径，通过命令：npm run dev

出现下图则表示项目已经启动好了：

然后在浏览器上输入：http://localhost:8080/#/，回车访问，出现下面界面则表示项目已经成功搭建和启动了，

接下来就可以写自己的各种业务代码

7. 如果不想用默认的8080端口则找到项目的index.js文件（我的位置在E:\myvuework\config\index.js），修改里面的prot参数，重新执行启动命令即可