【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——②项目开发中引入element-ui【全部引入】

1、打开element ui官方文档

进入组件导航栏下的安装目录 

输入如下命令，进行element ui安装【在本节仅介绍实现全局引用，不介绍局部引用】 

npm i element-ui -S

在my-app【打开vscode终端，进入创建vue-cli的文件下进入安装】

如图所示，正在下载

 下载完成之后显示如图

 打开package.json验证是否安装成功：发现depandencies中可查询到 element-ui的版本号，成功

2、在element-ui官网中进入组件导航栏下的快速上手，查找引入element中的完整引入 

将所缺代码写入已创建vue-cli文件夹下的main.js文件中

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

引入后如图所示

3、写入element ui组件进行测试【为了方便起见，本处在App.vue组件中进行添加】 

注意App.vue的原生样式要去除【否则可能会对样式产生影响】

①去除前

 ②去除后

将原先引入的HelloWorld组件注释

 引入element ui的el-button组件（代码如下：详情见官方文档）

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

 此时，App.vue的代码段如图所示

3、启动项目，检验element -ui是否引入成功

进入指定目录，输入如下命令

npm run serve

 正在启动

 启动成功

 打开项目，发现element ui已经被成功使用