vue+elementUI后台系统第二章：elementUI引入与使用

目录

目录

前言

一、安装elementUI

二、引入elementUI

1.引入库

2.使用elementUI

总结

---

前言

随着框架的流行，越来越多的开发者喜欢用框架开发项目，以vue、react等居主流，国内比较常用的就是vue进行项目的搭建，本系列文章主要使用vue+webpack进行项目的搭建，其中使用了elementUI进行了扩展，增加到后台系统的布局和路由相关知识，有兴趣就往下看吧~

---

一、安装elementUI

elementUI是一套非常完善的框架，里面有很多我们常用的组件，为了更方便的编写后台管理系统，我们会对elementUI进行全局引入方便项目中更好的使用

我们先回到项目文件夹下，也就是fristone文件下全局安装，执行命令：npm i element-ui

安装过程中我们可能会遇见，以下截图的问题：

 这表示版本之间会有高低差异，我们只需要按照提示执行命令：npm audit fix  就可以了

二、引入elementUI

现在我们elementUi也已经安装完成了，那我们需要把他引入到项目中。

1.引入库

首先找到src文件夹下面的main.js，然后复制以下代码，就可以引入了

代码如下：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2.使用elementUI

已经完成啦，我们现在来验证一下是否引入成功，打开App.vue，输入elmentUI代码：

代码如下：

<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>

此时再执行以下命令：npm run dev ，在浏览器中打开网址，截图如下，则表示成功了：

---

总结

以上就是今天要讲的内容，本章介绍了elementUI的安装及引用。

上一章：vue+elementUI后台系统（第一章：vue项目搭建）

下一章：vue+elementUI后台系统（路由的引入与首页创建）