ElementUI的安装使用

ElementUI

1. 介绍

Element-UI是什么：

Element-UI 是 饿了么 前端团队，开源出来的一套 Vue 组件库(针对pc电脑浏览器端)，内部集成了许多项目中可以使用的成熟组件component，既增强了用户体验，又加快了开发速度。

ElementUI官网：

https://element.eleme.cn/#/zh-CN

2. 安装

• 安装element-ui和简单使用

步骤：

1. 执行指令安装组件库

   npm i element-ui
   

2. 在main.js文件中引入element-ui模块和并注册

   // eslint要求import系列代码都要在普通代码上边设置
   // 引入elementui组件库
   import ElementUI from 'element-ui'
   // 引入css样式
   import 'element-ui/lib/theme-chalk/index.css'
   
   // 把组件库注册给Vue
   // 之前组件注册：Vue.component(名称,组件) 每次只能注册一个
   // 现在组件注册: Vue.use(组件模块) 一次性注册"全部"的组件，非常高效
   Vue.use(ElementUI)
   

3. 在App.vue组件中简单使用element-ui组件

   <template>
     <div id="app">
       <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" @click="del()">危险按钮</el-button>
       </el-row>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       del () {
         // elementui 的事件方法
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           this.$message({
             type: 'success',
             message: '删除成功!'
           })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           })
         })
       }
     }
   }
   </script>
   

   • element-ui组件库提供内容有三种：组件、事件方法、css样式。

注意：

1. 要在src目录下编辑项目代码，这是项目的源代码，完毕后还要做打包上线处理。
2. src目录下的代码不能部署，相反是打包后的代码文件可以部署。

3. 完整引入使用

什么是完整引入：

• 在项目入口文件main.js中一次性把ElementUI组件库全部的组件和方法做引入部署

// 引入elementui组件库
import ElementUI from 'element-ui';
// 引入css样式
import 'element-ui/lib/theme-chalk/index.css';
// 注册
Vue.use(ElementUI);

4. 按需引入使用

什么是按需引入：

• Element-UI本身有非常多的组件、css样式、方法，在一个项目中有可能不会用到全部，如果全部引入，不用的元素会造成额外资源开销，进而影响项目性能。采取的措施就是用多少就引多少，即按需引入。

步骤：

1. 安装依赖包

   npm i babel-plugin-component -D
   

2. 在babel.config.js文件中做如下配置

   module.exports = {
     plugins: [
       [
         'component',
         {
           'libraryName': 'element-ui',
           'styleLibraryName': 'theme-chalk'
         }
       ]
     ]
   }
   

以上两个步骤完成后，css样式 已经可以实现按需引入了，此时main.js中关于element-ui的css样式引入已经 不起作用了，鉴于代码美观可以删除或屏蔽 // import ‘element-ui/lib/theme-chalk/index.css’

3. 在main.js文件中给 组件 和 事件方法 做按需引入

   // 3.按需引入
   import { Row, Button, MessageBox, Message } from 'element-ui'
   
   // 按需注册组件
   Vue.use(Row)
   Vue.use(Button)
   
   // 按需注册事件方法(原型继承)
   Vue.prototype.$confirm = MessageBox.confirm
   Vue.prototype.$message = Message
   

   以上配置完毕，请重启服务 npm run serve

• 可以借鉴按需导入的全部组件和事件方法： https://element.eleme.cn/#/zh-CN/component/quickstart

注意：

1. 运行指令 npm run build(打包指令) ，在输出信息中可以比较看出按需引入和完整引入打包文件大小差别，按需引入的打包文件大小较小，则后期项目上线性能会更好。
2. 按需引入根据内容可以分为：css样式、组件、事件方法 3种。
3. 为了方便开发，前期只做css样式按需引入，待项目开发完毕后，再给组件和事件方法 做统一按需引入。
4. 如果按需引入配置完毕，发现页面按钮没有css效果，请重启服务npm run serve。