Element-ui和Element-plus组件库

区别

• Element-ui适用于vue2
• Element-plus适用于vue3

Element-plus

全局引用

• 缺点：全部组件和样式都引入的，很多都没用上，所以造成了打包文件太大
• 下载 npm install element-plus
• 引用

// 全局引用
import ElementPlus from 'element-plus'
// 引用所有样式
import 'element-plus/lib/theme-chalk/index.css'

// 使用
app.use(ElementPlus)

• 在其他组件里面不用注册就可以使用

  
  

局部引入

• 缺点：由于是按需引入，所以引入频繁
• 下载 npm install element-plus
• 引用：

//导入组件
import { ElButton } from 'element-plus'
//导入基础样式
import 'element-plus/lib/theme-chalk/base.css'
//导入按钮的样式
 import 'element-plus/lib/theme-chalk/el-button.css'
export default defineComponent({
  name: 'App',
  components: {
   // 注册组件
    ElButton
  }
})

配置引入

• 只能引入插件的 css 文件，但是 base 样式和 icon 还需要手动引入
• 下载 npm install element-plus
• 下载插件： npm install babel-plugin-import -D
• 配置 babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
  presets: ['@vue/cli-plugin-babel/preset']
}

• 在main文件中全局导入base样式文件和按钮组件并注册
  不抽离：

import 'element-plus/lib/theme-chalk/base.css'
import { ElButton } from 'element-plus'
//注册全局组件
app.component(ElButton.name, ElButton)

抽离：
新建文件：

import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
const components = [ElButton, ElForm, ElFormItem, ElInput]

export function registerApp(app: any) {
  for (const component of components) {
    app.component(component.name, component)
  }
}