Vue cli
随着vue.js越来越热门，更多的项目都用到vue进行开发，大多数公司选择脚手架开发，因为快捷方便，开发中周期短，开发人员学习成本低。
-
开发环境搭建
1.1 node环境 http://nodejs.cn/
搭建vue开发环境之前必须先安装node环境
1、使用win+r ,输入cmd ,按回车按钮，进入命令提示符窗口，输入：node-v回车，看到有相对应的版本。
1.2 vue脚手架搭建
1、vue cli 是安装vue的脚手架工具，也是vue官方命令行工具，可以用来快速创建项目。
2、npm install --global vue-cli 或者 cnpm install --global vue-cli(推荐使用)
3、vue-version //查看vue-cli的版本
4、使用 npm 安装模块，因为资源在国外所以会导致下载速度过慢，因此可以使用 npm 淘宝镜像来进行安 装，它会定期同步 npm 上面的模块资源，让用户的下载速度更快，但是如果想使用 cnpm 进行模块安装，首先 需要安装 cnpm，参考：https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org
5、安装顺序：node —>npm install -g cnpm --registry=https://registry.npm.taobao.org—>cnpm install --global vue-cli
1.3 创建运行项目
1、打开JetBrains WebStorm 在Terminal输入命令：vue init webpack shop
初始化成功后
2、cd shop 在 webstorm 中可以使用 tab 键进行路径的补全。
3、npm run dev 运行项目 报错的时候，先运行下 cnpm install ，然后在运行 npm run dev
4、访问项目 根据提示，在浏览器中输入地址。
5、打包命令 npm run build 运行完之后，程序会自动给的进行 vue 组件的解析，最后会在 src 目录下生成一个 dist 文件，里面包含的是 html,js,css,提交项目的时候，直接将该目录里面的文件按照顺序放入服务器中，然后将域名地址解析到服务器上 的目录下，就可以访问了。
6、如何别人的 vue 项目 cd 到目录下，运行 cnpm install cnpm install – 安装包
1.4 vue版本&vue-cli版本问题
1、 vue2.x 和 vue3.x vue2.x 是 vue 当前应用的比较稳定的版本，目前 Vue3.X 还在重写当中，还未发布。
2、 vue Cli 2 和 vue Cli 3 vue cli 3 是 vue cli 2 的升级版本，vue cli 3 和老版本的 vue cli 创建项目的方式不一样，但是创建项目的用法 是一样的，写代码的方式也是一样的（在 vue3.0 发布之前），不过 vue cli 3 在项目编译速度上面做了一些优化。
1.5 vue cli不同版本创建项目的方式
1、vue init webpack vue-cli-demo01---> cd vue-cli-demo01---> cnpm install 或者npm install--> npm run dev
2、 vue Cli 3 创建项目 vue cli 3 官网：https://cli.vuejs.org/zh/guide/ Node 版本要求：Vue CLI 3 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。（1）安装 vue 脚手架工具（vue cli3）官方命令行工具 如果之前有全局安装过 vue cli2 ，需要将 vue cli 2 卸载掉。 Npm uninstall -g vue-cli 然后安装 vue-cli npm install -g @vue-cli / cnpm install -g @vue-cli （2）创建项目 Vue create vuedemo01 Npm run serve 运行服务，速度比 2 快一些 Npm run build //编译 （3）图形化界面创建项目 推荐使用命令个创建（4）创建项目 vue create greens-shop 输入回车键， $ cd greens-shop $ npm run serve 项目启动后不要关闭。