vue3+vite2.X引入element-plus

安装element

npm i element-plus@1.0.2-beta.28

全局引入

1. main.js文件修改

   import { createApp } from 'vue'
   import App from './App.vue'
   import ElementPlus from 'element-plus'
   import router from '@/router'
   
   import 'element-plus/lib/theme-chalk/index.css';
   
   const app = createApp(App)
   
   app.use(router)
   
   app.use(ElementPlus)
   
   app.mount('#app')

按需引入

1. 推荐vite-plugin-babel-import 来实现element-plus的按需引入，安装

   npm i vite-plugin-babel-import -D

2. 修改vite.config.js

   ...
   import vitePluginImport from 'vite-plugin-babel-import'
   ...
   
   plugins: [
       vue(),
       vitePluginImport([{
         libraryName: 'element-plus',
         libraryDirectory: 'es',
         style(name) {
           return `element-plus/lib/theme-chalk/${name}.css`
         }
       }])
     ],
   ...

3. 修改main.js

   ...
   import { ElButton } from 'element-plus'
   ...
   app.use(ElButton )

   或者将引入的组件单独放一个文件
   在根目录src新建plugins.js 

   import {
     ElButton,
     ElLink
   } from 'element-plus'
   const pluginAry = [
     ElButton,
     ElLink
   ]
   export default pluginAry

   修改main.js

   ...
   import pluginAry from './element-plugins.js'
   ...
   pluginAry.forEach(plugin=>{
     app.use(plugin)
   })
   ...