vue3 element-plus按需引入(vite)优雅用法
一、安装相应依赖二、vite.config.js配置三、删除全局引入
·
一、安装
npm install -D unplugin-vue-components unplugin-auto-import
二、vite.config.js里
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
export default defineConfig(() => {
return {
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
],
}
})
三、删除全局引入
如果之前你是全局引入,那么现在你可以把这些删掉了,因为Element-plus已使用按需引入,插件会自动挂载处理,无需引入即可在页面使用。(未全局引入请忽略)
这是我的main文件,没有element-plus的引入项;
按需引入的目的:
- 减少打包后的体积(使用了哪些组件会自动按需引入,减少未使用而引入的组件)
- 提升加载效率、减少打包的体积
import {
createApp,
} from 'vue'
import '@assets/style/reset.css'
import '@assets/style/index.scss'
import App from './App.vue'
import router from './router'
import store from './store'
import svgRegister from '@assets/js/svgRegister';
import * as echarts from 'echarts';
const app = createApp(App);
app.use(router)
app.use(store)
svgRegister(app) // 封装svg组件
app.config.globalProperties.$echarts = echarts;
app.mount('#app')
四、icon的使用
icon组件还需单独再引入
import { Avatar, SwitchButton } from "@element-plus/icons-vue";
使用:<el-icon><avatar /></el-icon>
也可以在main.js里全局引入
import * as ElIcons from '@element-plus/icons-vue'
for (const name in ElIcons) {
app.component(name, ElIcons[name])
}
使用:
<component is="图标的名称"></component>
更多推荐
已为社区贡献3条内容
所有评论(0)