搭建vue-cli脚手架

1.搭建环境

前期工作准备：

1.首先需要安装node.js，可以从官网下载。这里给大家一个Windows64位安装包下载地址：https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi。
下载完成后检查Node.js版本：在命令行输入node –version可以查看到当前版本。

2.安装淘宝镜像，因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候会超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。命令行输入：npm install -g cnpm –registry= https://registry.npm.taobao.org。安装完成后，就可以用cnpm 代替 npm ，速度会快很多。

3.安装webpack，命令行工具输入：npm install webpack -g，按装完成后可根据webpack -v(小写v) 来查看当前版本。

4.安装vue-cli，命令行输入：cnpm install vue-cli -g, 使用vue-V来查看当前版本。（注意：此处查看版本使用大写V）。

2.用v-cli搭建项目

1.首先需要安装GitBash.(具体方法请百度)。
2.打开安装好的GitBash。

• 可以使用cd 切换到你想要放置的文件夹下。
• 直接找到你所放置的文件夹，右击选择GitBash打开。

3.安装vue脚手架输入：vue init webpack xxx ，注意这里的“xxx” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。
接下来会问好多问题：

• ? Project name (xxx)
  这里是问你项目名称是不是xxx ，按回车，表示，是。当然，你也可以重写一个，然后回车。

• ? Project description (A Vue.js project)直接回车。

• ? Author (xxx <1798220628@qq.com>)直接回车。

• ? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere这里是问你，需要不需要安装编译器，我们选择需要安装，所以直接回车就OK了。

• ? Install vue-router? (Y/n)是否安装路由，直接回车。
• ? Use ESLint to lint your code? (Y/n)直接回车。

• ? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)这里是问你需要使用哪种风格来检查你的代码。我们选择第一个 Standard 来检查代码，所以直接回车。

• ? Setup unit tests with Karma + Mocha? (Y/n)是否需要安装测试，否输入n回车。

• ? Setup e2e tests with Nightwatch? (Y/n)否输入n回车。
  最终会显示：
  
  出现这个说明安装成功。
  接下来分别执行：

1.cd vue-demo//进入文件夹
2.cnpm install  //对项目进行初始安装
3.cnpm run dev //测试运行项目

最后在浏览器中打开,页面如下：

到这里，我们已经安装了 nodejs 和 vue-cli 脚手架工具，并且利用脚手架工具生成了一个基于 webpack 的项目。