elementUI 按需引入

1.安装

npm i element-ui -S

需求：举例如果在这个项目文件里面用到了el-button，就自动引入button组件 相关的样式

2.样式按需引入插件安装:（ babel 里的一个插件）

npm install babel-plugin-import -D

3.使用这个样式插件：在    babel.config.js 文件 

module.exports={
plugins:[ //表达的意思是：当我们通过import,从element-ui 组件库里面，引用东西的时候
"import",
{
libraryName:"element-ui",
customStyleName:(name)=>{ //我们同时要引用自定义的一个样式
//然后这个样式是element-ui/lib/theme-chalk 对应name 的 样式
return `element-ui/lib/theme-chalk/${name}.css`
}}]
preset:['@vue/cli-plugin-babel/preset']
}

以上配置只为在我们引入某个组件是才会引入对应的css 配置，我们用到的一些图标，他其实是不回帮我们引用的，我们在main.js 里面统一的做一个引入

import 'element-ui/lib/themes-chalk/base.css'

4.可以在Src 文件下新建一个global 文件夹

import 'element-ui/lib/themes-chalk/base.css'
import {ElButton,ElForm,ElInput} from 'element-ui'
//将这些组件放在一个数组里面const components=[
ElButton,
ElForm,
ElInput
]//然后对这个数组做一个遍历
export default function(app){
for(const component of components){
//拿到app.component 里面的 compoent.name,在然后写上对应的component
app.component(component.name,component)}
}

在新建文件：注册registerElement，往后耶可以在这个文件里注册其他

import registerElement from './register-element'
export function register(app){
registerElement(app) //注册
}

5.在main.js 进行引入

import Vue from 'vue'
import {registerApp} from ‘./global’
//调用registerApp，并且将app给传进来
resgisterApp(app)