Vue2.0搭建脚手架

一、安装node.js

1、从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。

2、安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应的版本号，就说明安装成功了。

3、我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v，就会如下图所示，显示出npm的版本信息（另外需要注意的是，npm的版本最好是3.x.x以上，以免对后续产生影响）。

到这里node的环境已经安装完毕了，npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定，所以我们需要切换到淘宝的npm镜像——cnpm。

二、安装cnpm

1、点击进入淘宝的cnpm网站，里面有详细的配置方法。

2、或者直接在命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后等待安装完成。

3、输入cnpm -v，可以查看当前cnpm的版本，这个和npm的版本还是不一样的。

4、使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了。

三、安装vue-cli脚手架构建工具

vue-cli 提供了一个官方命令行工具，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目

1、全局安装 vue-cli

# 全局安装 vue-cli
$ cnpm install --global vue-cli
#或者
$ cnpm install vue-cli -g

2、安装完成

3、然后在电脑端 C:\Users\Administrator\AppData\Roaming\npm\node_modules 目录中，可以发现多了vue-cli文件

4、输入命令vue -V，可以查看当前脚手架的版本

四、创建一个基于 webpack 模板的新项目

1、要创建项目，首先我们要选定目录，然后在选定的目录中打开命令窗口（shift + 右键，打开PowerShell命令窗口），在命令行中输入如下命令：

#empty-project为自定义项目名
$ vue init webpack empty-project

2、开始创建项目

需要注意的是项目的名称不能大写，不然会报错。

Project name (empty-project) # 项目名称（空项目）

enter键，进行下一项

Project description (A Vue.js project) # 项目描述（一个Vue.js 项目）

enter键，进行下一项

Author 作者（你的名字）

enter键，进行下一项

Vue build（Use arrow keys）# Vue 创建方式（选择第一项标准模式）

上下箭头，切换选项
enter键，进行下一项

Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后spa（单页面应用）需要的模块

Y / yes，选择yes
enter键，进行下一项

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）

Y / yes，选择yes
enter键，进行下一项

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（选择第一项标准模式）

上下箭头，切换选项
enter键，进行下一项

Setup unit tests with Karma + Mocha? (Y/n) # 用（Karma + Mocha）设置单元测试？ （Y/ N）

N / no，选择no
enter键，进行下一项

Setup e2e tests with Nightwatch? (Y/n) # 用（Nightwatch）设置用户界面测试？ （Y/ N）

N / no，选择no
enter键，进行下一项

Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) # 在项目被创建之后，是否通过 npm install 初始化项目（推荐）（选择第一项，推荐方式）

上下箭头，切换选项
enter键，进行下一项

当然这些都看自己的情况。

3、到此，项目就搭建好了

3.1 不带单元测试与用户界面测试，不带 eslint 校验

3.1 不带单元测试与用户界面测试，带 eslint 校验

3.2 只带单元测试，带 eslint 校验

3.3 只带用户界面测试，带 eslint 校验

3.4 带单元测试与用户界面测试，带 eslint 校验

五、进入你这个项目的目录，初始化一个项目

执行命令，进入项目所在目录，并初始化

cd empty-project
cnpm install   初始化

六、运行项目

1、执行命令，运行项目

#或者
$ cnpm run dev
#或者
$ npm run dev
#或者
$ npm start

2、在浏览器中输入网址 http://localhost:8081/#/，即可打开项目