使用vue-cli快速构建应用（Vue脚手架安装指南）

- 开始之前

相信大家在vue官网上（https://cn.vuejs.org/ ）学习完vue的一些基础教程后，都蠢蠢欲动想要开始做点什么了吧，正如官网所说，前提是已经了解过vue的基础语法，核心思想，vue-loader，vue-router等基础知识之后我们再开始使用脚手架vue-cli，这样会有更好的体验和成长，毕竟不能一口吃成胖子嘛。在我们开始构建自己的Vue应用时使用vue-cli脚手架是很有必要的，因为vue-cli中已经为我们准备了大部分我们会用到的工具，我们可以选择不同类型的脚手架快速构建不同的应用。

- 别废话，我只想来点实际的

首先我们得安装npm来下载vue-cli，还没下载npm的朋友最好下载nodeJs吧，安装包里包含了npm。
nodeJ下载地址：https://nodejs.org/zh-cn/

接着进入正题，打开cmd命令行，全局下载vue-cli，输入：
npm install --global vue-cli

安装完成后，切换到自己的项目路径，开始初始化基于vue-cli的项目。 首先我们输入vue list后可以看到vue-cli为我们创建项目提供了多个模板，其中有webpack完整版简易版， browserify完整版简易版，pwa渐进式web框架和单纯的vue配置模板：

image

我们以webpack为例，输入：
vue init webpack myproject

myproject 项目名字自己取，接下来是安装流程：

Project name (myproject) 括号中是默认选项，你可以修改也可以直接回车确认

Project description (A Vue.js project)项目描述，也可以直接回车跳过

Author (xxxxx)作者名称

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 仅运行时
选择运行时编译的原因，可以翻回官网文档： https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时

Install vue-router? (Y/n) 是否安装vue-route，建议选择Y，vue路由大多情况下都会使用上，特别是构建单页面应用的时候。

Use ESLint to lint your code? (Y/n)是否使用ESlint来管理你的代码风格，建议选择Y，养成良好的代码风格很重要，至于选择哪种风格因人而异（Standard，AirBNB，none），我一般使用Standard标准。

Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，Y

Setup e2e tests with Nightwatch?(Y/n)是否安装e2e测试，Y

安装完成，接下来按照提示所说的指令输入，即可完成构建。

进入我的项目
cd myproject

安装所有的依赖模块，这个过程相当漫长，因为npm是国外服务器，我们可以选择使用国内npm镜像资源，例如淘宝的，参考文章：http://riny.net/2014/cnpm/
npm install

构建完成后，我们可以去run一下，看一下运行后的效果：
npm run dev

此时会弹出我们项目页面：

image

现在我们就可以进行项目开发啦，开发过程中页面会实时进行渲染更新。

当我们需要打包项目的时候，可以输入：
npm run build

打包完成后，目录中会生成一个dist文件夹，这个就是我们最后的项目输出成品啦。

本文到这里就结束啦~
有疑问的话随时可以在下方评论哦，假如觉得这篇文章能帮助到你的话就给我点个“喜欢”呗 : )