搭建vue框架并使用element-ui

1.构建 node 下载环境

在 nodejs 官网下载 node 并且安装 nodejs 在 wind10（推荐下载长期支持版）下载地址:https://nodejs.org/zh-cn/download/current/

完成安装后打开电脑的 cmd 测试 node 环境:

出现以上显示表示 node 环境已经构建好了。

2.换淘宝的源提升下载速度

cmd 中输入命令:

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

下载完成后，输入测试命令:

cnpm -v

出现以上显示表示换源成功，以后在用到 npm 的地方就用 cnpm 就好了，可提升效率

3.搭建 vue 前端框架环境:

在 cmd 中输入命令:

1	cnpm install --global vue-cli

等待下载完成，速度很快，大概 30 秒

测试 vue 是否搭建完成:

显示版本号即搭建 vue 框架完成(注意 vue 和 cli 与中间的-要有空格)

4.新建 vue 框架项目

1.打开集成环境(我这里用的是 WebStorm)

打开后,点击左下角的 Terminal 进入 cmd 命令框输入命令：

1	vue init webpack element-test

vue init webpack +项目名，我这里用 element-test 为例

说明：

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到所以 Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测目前我们不需要所以 n 回车；

Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要端到端测试工具目前我们不需要所以 n 回车；
使用到的下载工具，我这里以 npm 为例
等待安装 vue 项目即创建了 vue 框架项目:

2.测试 vue 框架项目是否搭建成功

打开 cmd 控制台

打开项目所在位置的文件夹
运行 cnpm start

点击访问网址: http://localhost:8081,显示

表示项目构建成功！

5.使用 element-ui 框架

1.安装 element 框架依赖

在 cmd 控制台输入

1	cnpm i element-ui -S

安装完毕

2.在 main.js 中引入 element-ui

main.js 在(你的项目)\src 文件夹下，我这里是 element-test\src\

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
//引入elementui
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

//在vue中使用elementui
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

如上图，引入并使用 element-ui

3.element-ui 的使用实例

1.在 src\components 的目录下新建一个组件(这里以 Button.vue 为例)

2.注册 Button.vue 组件

在 src\router\index.js 中写入 import Button from “../components/Button”; 路由组件如下图:

3.修改 App.vue 文件

4.引入 element-ui 样式(进入element-ui 官网可使用其他大量组件)

修改 Button.vue 文件，写入以下代码:

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

保存在运行此项目(在控制台使用 cnpm start)

点击超链接

即成功引用 element-ui 框架

6.总结

1.安装 nodejs

2.在 cmd 中:

1.换源：npm install -g cnpm –registry=https://registry.npm.taobao.org

2.安装 vue:

1	cnpm install --global vue-cli

3.新建 vue 框架项目(切换至 WS 控制台)

1	vue init webpack element-test

4.下载 element-ui 依赖

1	cnpm i element-ui -S

5.修改 main.js 文件

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
//引入elementui
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

//在vue中使用elementui
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

重点看//后面的注释