Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，使用 Vue CLI 可以快速创建 vue 项目。

一、安装node.js

使用Vue CLI首先需要安装node环境，可以到中文官网进行下载安装：https://nodejs.org/en/download/

安装完成后，打开命令窗口，输入命令node -v，可以检查node的版本，输入npm -v检查npm 的版本：

二、安装Vue CLI

安装完node，便可以全局安装Vue CLI，输入命令:

npm install -g vue-cli

安装完成后可以输入vue -V 检查是否安装成功：

如果出现如图版本号了，则表示安装成功，如果安装过程太慢，可以使用淘宝镜像：

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

检查是否安装成功：

cnpm -v

然后cnpm install -g vue-cli进行安装Vue CLI。

因为Vue 模板中自带webpack，可以不安装webpack。

三、搭建项目

进入你的项目目录，输入vue init webpack Vue-Project。

然后，进入项目目录cd Vue-Project，启动项目：npm run dev。

如图，则启动成功。复制地址到浏览器，打开如下页面：

我们可以用编辑器（我使用webStorm）打开项目，找到config下的index.js文件，把autoOpenBrowser改为true，这样在启动项目时，就会自动打开浏览器，port是配置端口，可以自由配置。

四、安装scss（sass）

安装sass的依赖包：

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

如果看到红框里面的提示，可以忽视。

然后，我们在build文件夹下的webpack.base.conf.js的rules里面添加以下配置：

{ 
    test: /\.sass$/, 
    loaders: ['style', 'css', 'sass'] 
}

在HelloWorld.vue中使用，style标签中加上lang="scss"：

如果你不喜欢用scss，还可以用less等其他css预处理语言，这里不做安装方法介绍了。

五、安装element-ui

全局引用安装：npm i element-ui -S

在main.js中写入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后我们可以对照element-ui文档：http://element-cn.eleme.io/#/zh-CN/component/installation 在页面中使用了，比如我们在HelloWorld.vue使用：

<el-button type="primary">主要按钮</el-button>

你也可以按需引入：npm install babel-plugin-component -D ，这里不做详细介绍了，大家可以自行百度。

好啦，到目前为止，项目就简单搭建好了，在下一篇内容里，将会讲到axios请求封装。