vue2.0搭建vue脚手架(vue-cli)，集成element-ui

1.首先要安装node.js

下载地址 https://nodejs.org/en/

安装完成后，在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
[email protected] (D:\dev\nodejs\node_modules\cnpm\lib\parse_argv.js)
[email protected] (D:\dev\nodejs\node_modules\npm\lib\npm.js)
[email protected] (D:\dev\nodejs\node.exe)
[email protected] (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
Visual Studio Code