vue2.0搭建vue脚手架(vue-cli)，集成elemen
1.首先要安装node.js
安装完成后，在cmd命令行里面键入node -v查看版本
C:\Users\lh188>node -v
v8.9.3
我们需要的npm功能已经在node中集成，输入npm -v查看版本
C:\Users\lh188>node -v
v8.9.3
展示版本号，代表已经安装成功。
2.由于npm的部分资源被强，我们需要安装cnpm，相当于国内的镜像地址。
在命令行里键入
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装完成后输入cnpm -v查看版本
C:\Users\lh188>cnpm -v
cnpm@5.3.0 (D:\dev\nodejs\node_modules\cnpm\lib\parse_argv.js)
npm@6.1.0 (D:\dev\nodejs\node_modules\npm\lib\npm.js)
node@8.9.3 (D:\dev\nodejs\node.exe)
npminstall@3.7.0 (D:\dev\nodejs\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\dev\nodejs
win32 x64 10.0.17134
registry=https://registry.npm.taobao.org
这个版本和npm是不一样的。
使用方法就是需要用npm的地方用cnpm代替。
3.安装vue
键入
cnpm install vue
4.安装vue-cli
键入
cnpm install --global vue-cli
5.创建一个基于 webpack 模板的新项目
新建一个项目文件路径，在命令行中进入要新建项目的文件路径下键入
vue init webpack my-project
运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
需要注意的是项目的名称不能大写，不然会报错。
Project name (my-project) # 项目名称（我的项目）
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）
6.安装完成后，运行项目
在命令行中进入项目文件目录下键入
npm run dev
在浏览器输入完成显示的地址：http://localhost:8080
DONE Compiled successfully in 4254ms 10:51:13
I Your application is running here: http://localhost:8080
看到下图说明项目构建成功
image.png
7，集成element-ui
在项目目录的命令行输入
npm i element-ui -S
安装完成后在项目的main.js增加import
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //单独引入样式文件
Vue.use(ElementUI)
至此，集成了Element-ui的vue-cli脚手架搭建完成
8.推荐使用ide
Visio Studio Code
