通用后台管理——element-ui

目录

前言

一、element-ui是什么？

二、下载

三、全局引入

四、按需引入

总结

---

前言

前面介绍了vue  router，管理路由，实现多个页面跳转，接下来将继续介绍另一个依赖element-ui。这是一个非常丰富的前端框架，我将介绍如何下载及使用这个前端框架。

---

一、element-ui是什么？

• 官网：Element - The world's most popular Vue UI framework

• Element-UI 是一个基于Vue.js的前端UI框架。

• Element-UI 提供了丰富的预定义组件，如表单、表格、弹窗、按钮、菜单等，用于帮助开发者快速构建美观且易用的Web应用程序。它的设计风格简洁美观，易于定制，能够满足不同场景下的需求。Element-UI 组件库还包含高级组件，如日期选择器、对话框等，同时支持响应式布局和主题定制。

二、下载

下载命令：

 npm i element-ui -S

三、全局引入

具体有如下几步：

#1、导入element-ui

#2、导入相关css

#3、使用Vue.use( ElementUI)全局注入

在main.js中添加如下：

 import ElementUI from 'element-ui'; //导入
 import 'element-ui/lib/theme-chalk/index.css';//导入相关css
 import App from './App.vue';
 ​
 Vue.use(ElementUI);//全局注入
 ​
 new Vue({
   el: '#app',
   render: h => h(App)
 });

四、按需引入

为了不让整个项目的体积过于庞大，可以采用按需引入框架的方法，借助借助 babel-plugin-component，我们可以只引入需要的组件，具体步骤如下：

1、安装 babel-plugin-component：

npm install babel-plugin-component -D

2、然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、 然后在main.js中按需引入组件即可

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

---

总结

        以上就是关于element-ui框架的简单介绍。