01vue-cli命令行工具搭建vue.js开发环境

vue-cli命令行工具优势

　　1、成熟的vue项目架构设计，会随着Vue版本的迭代而更新

　　2、提供了一套本地的热加载的测试服务器

　　3、集成打包上线的方案，可使用webpack或Browserify等构建工具

vue-cli命令行工具对系统要求

电脑必须安装node.js(>=4.0x)环境（node.js文件下载地址 http://nodejs.cn）

选择自己电脑系统对应的版本，下载后双击下一步安装即可，查看是否安装成功可以调出命令窗口运行node-v查看，如果输出版本号说明安装成功

由于命令窗口使用起来不是很方便我们可以下载个MobaXterm工具（这个工具使我们的操作更贴近linux的操作习惯）

 

安装vue-cli命令

$ npm install -g vue-cli

利用npm安装比较慢，推荐使用国内镜像来安装，可以先设置cnpm 

$ alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"　　

如果安装失败，可使用npm cache clean 清理缓存，再重新安装。如果提示无法识别vue,有可能是npm版本过低 可以用npm install -g npm 来更新版本。

图解安装vue-cli命令

淘宝镜像安装成功后可以用cnpm安装vue-cli

利用webpack模板进行项目构建

安装依赖和运行项目

浏览器运行后的界面

　

　如果打开浏览器，没有加载出页面，有可能是本地8080端口被占用，需要修改一下配置文件config>index.js

打包上线 

打包完成后会生成dist文件夹，项目上线时，只需要将dist文件夹放到服务器就行了

$ npm run build