vue3集成Element-Plus之全局导入和按需导入
- 技术交流
- 2024-10-01 11:36:02
目录
- element-plus集成
- 1. 全局引入
- 2. 局部引入(按需引入)
- 2.1 手动引入
- 1.安装插件:
- 2.配置vue.config.js
- 2.3 自动导入组件以及样式[推荐】
- 1.安装插件:
- 2.配置vue.config.js(其他配置方式看官网)
- 3 直接使用
- 总结
element-plus集成
Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库:
- 在Vue2中使用element-ui,而element-plus是element-ui针对于vue3开发的一个UI组件库;
- 它的使用方式和很多其他的组件库是一样的,所以学会element-plus,其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的;
- 移动端使用VantUI | MintUI
- 安装element-plus
npm install element-plus
1. 全局引入
一种引入element-plus的方式是全局引入,代表的含义是所有的组件和插件都会被自动注册:
//main.ts import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import router from './router' import store from './store' createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
2. 局部引入(按需引入)
也就是在开发中用到某个组件对某个组件进行引入:
2.1 手动引入
Default Primary Success Info Warning Danger
但是我们会发现是没有对应的样式的,引入样式有两种方式:
全局引用样式;import 'element-plus/dist/index.css'
局部引用样式(通过 unplugin-element-plus 插件);
1.安装插件:
npm install unplugin-element-plus -D
2.配置vue.config.js
const ElementPlus= require('unplugin-element-plus/webpack'); module.exports = { configureWebpack: { resolve: { alias: { components: '@/components' } }, //配置webpack自动按需引入element-plus样式, plugins: [ElementPlus()] } };
但是这里依然有个弊端:
- 这些组件我们在多个页面或者组件中使用的时候,都需要导入并且在components中进行注册;
- 所以我们可以将它们在全局注册一次;
import { ElButton, ElTable, ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, } from 'element-plus' const app = createApp(App) const components = [ ElButton, ElTable, ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge ] for (const cpn of components) { app.component(cpn.name, cpn) }
2.3 自动导入组件以及样式[推荐】
1.安装插件:
npm install -D unplugin-vue-components unplugin-auto-import
2.配置vue.config.js(其他配置方式看官网)
const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); const { ElementPlusResolver } = require('unplugin-vue-components/resolvers'); module.exports = { configureWebpack: { resolve: { alias: { components: '@/components' } }, //配置webpack自动按需引入element-plus, plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } };
3 直接使用
Default Primary Success Info Warning Danger
总结
到此这篇关于vue3集成Element-Plus之全局导入和按需导入的文章就介绍到这了,更多相关Element-Plus全局导入和按需导入内容请搜索讯客以前的文章或继续浏览下面的相关文章希望大家以后多多支持讯客!
vue3集成Element-Plus之全局导入和按需导入由讯客互联技术交流栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“vue3集成Element-Plus之全局导入和按需导入”