vue3引入element-plus的各种方式
- element-plus 导入总是出现问题，所以做了个小结
- 使用 pnpm 管理，版本号
如何进行引入的 先搞清楚具体的包的位置和内容
- element-plus 在项目中的地址
- el-xxx 就是一个一个封装好的组件
注意 目录的层级 element-plus---->lib----> xxxx
第一种 全局注册
- 有了上面的图解应该很容易明白这种引入方式的原理了
//全局导入import'element-plus/lib/theme-chalk/index.css'//所有的cssimport ElementPlusfrom'element-plus'const app=createApp(App)
app.use(ElementPlus)// 全局使用插件第二种 按需注册和引入css样式
// 按需引入import'element-plus/lib/theme-chalk/base.css'// 基础cass 圆角等cssimport'element-plus/lib/theme-chalk/el-button.css'// button 的cssimport{ ElButton}from'element-plus'//导入 button组件const app=createApp(App)// 组件注册和插件注册都行，自己选一种//app.component(ElButton.name, ElButton) // 注册组件形式
app.use(ElButton)// 使用插件的形式
- 这样就能理解 如何进行按需导入组件了
第三种 优雅的按需注册和引入css样式方式
- 可以使用 vue add element-plus 自动会生成plugins结构
还差自己组件的样式 利用一个插件 实现自动导入
pnpm i babel-plugin-import -D
重点一定要对应好，有的版本是直接没有el 开头，或者就没有 lib这个文件 或者 不是叫theme-chalk自己去看看自己下载的包长什么样子的，网上都有对应解决的办法。
第四种 官方推荐的引入
npm install-D unplugin-vue-components unplugin-auto-import
- main.js
import{ createApp}from'vue'import Appfrom'./App.vue'import routerfrom'@/router/index'import storefrom'./store'// 全局导入// import 'element-plus/lib/theme-chalk/index.css' //所有的css// import ElementPlus from 'element-plus'// app.use(ElementPlus) // 全局使用插件// 按需引入// import 'element-plus/lib/theme-chalk/base.css' // 基础cass 圆角等// import 'element-plus/lib/theme-chalk/el-button.css' // button 的css// import { ElButton } from 'element-plus'const app=createApp(App)// app.component(ElButton.name, ElButton) // 注册组件形式// app.use(ElButton) // 使用插件的形式// import { globalRegister } from './plugins'// app.use(globalRegister)
app.use(router)
app.use(store)
app.mount('#app')- babel.config.js
module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:[['import',{libraryName:'element-plus',customStyleName:(name)=>{return`element-plus/lib/theme-chalk/${name}.css`}}]]}- vue.config.js
const{ defineConfig}=require('@vue/cli-service')const AutoImport=require('unplugin-auto-import/webpack')const Components=require('unplugin-vue-components/webpack')const{ ElementPlusResolver}=require('unplugin-vue-components/resolvers')
module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,configureWebpack:{plugins:[AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]})]}})