|
官网:一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
1.安装:运行cmd,转到我的项目的目录下\vuedemo ,执行命令:npm install element-plus --save
2.整体导入Element-plus,修改mian.js文件- import { createApp } from 'vue'
- //导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
- import { createPinia } from 'pinia'
- //从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
- import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
- //整体导入 ElementPlus 组件库
- <strong>import ElementPlus from 'element-plus'</strong> //导入 ElementPlus 组件库的所有模块和功能
- <strong>import 'element-plus/dist/index.css'</strong> //导入 ElementPlus 组件库所需的全局 CSS 样式
- import App from './App.vue'
- //路由
- import router from './router'
- const pinia=createPinia();
- //将插件添加到 pinia 实例上
- pinia.use(piniaPluginPersistedstate)
- const app=createApp(App);
- app.use(pinia);
- <strong>app.use(ElementPlus);</strong>
- app.use(router);
- app.mount('#app');
复制代码
3.导入图标,修改main.js - import { createApp } from 'vue'
- //导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
- import { createPinia } from 'pinia'
- //从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
- import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
- //整体导入 ElementPlus 组件库
- import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
- import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
- <strong>import * as ElementPlusIconsVue from '@element-plus/icons-vue' </strong>//导入 ElementPlus 组件库中的所有图标
- import App from './App.vue'
- //路由
- import router from './router'
- const pinia=createPinia();
- //将插件添加到 pinia 实例上
- pinia.use(piniaPluginPersistedstate)
- const app=createApp(App);
- app.use(pinia);
- //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
- <strong>for (const</strong><strong> [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component)
- }</strong>
- app.use(ElementPlus);
- app.use(router);
- app.mount('#app');
复制代码
------------------------------------------------------------------------------------------漂亮的分割线------------------------------------------------------------------------------------------------------
上面是整体导入ElementPlus,下面就是按需导入ElementPlus。
4.按需导入,修改main.js
先安装两个插件, unplugin-vue-components 和 unplugin-auto-import 插件
安装命令:npm install -D unplugin-vue-components unplugin-auto-import
先把之前main.js的整体导入都注释掉- import { createApp } from 'vue'
- //导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
- import { createPinia } from 'pinia'
- //从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
- import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
- /*
- //整体导入 ElementPlus 组件库
- import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
- import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
- import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
- */
- import App from './App.vue'
- //路由
- import router from './router'
- const pinia=createPinia();
- //将插件添加到 pinia 实例上
- pinia.use(piniaPluginPersistedstate)
- const app=createApp(App);
- app.use(pinia);
- /*
- //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
- for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component)
- }
- app.use(ElementPlus);
- */
- app.use(router);
- app.mount('#app');
复制代码 修改vite.config.js文件- import { defineConfig } from 'vite'
- import vue from '@vitejs/plugin-vue'
- import path from 'path' //导入 node.js path
- <strong>
- import AutoImport from 'unplugin-auto-import/vite'
- import Components from 'unplugin-vue-components/vite'
- import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'</strong>
- // https://vitejs.dev/config/
- export default defineConfig({
- plugins: [
- vue(),
- <strong>AutoImport({
- </strong><strong>// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
- imports: ['vue'],
- resolvers: [
- ElementPlusResolver(),
- ],
- }),
- Components({
- resolvers: [
- ElementPlusResolver(),</strong><strong>
- ],
- }),</strong>
- ],
- resolve: {
- alias: { //配置路径别名
- '@': path.resolve(__dirname, 'src')
- }
- }
- })
复制代码
自动导入图标,安装 unplugin-icons 插件
安装命令:npm install -D unplugin-icons
修改vite.config.js文件- import { defineConfig } from 'vite'
- import vue from '@vitejs/plugin-vue'
- import path from 'path' //导入 node.js path
- import AutoImport from 'unplugin-auto-import/vite'
- import Components from 'unplugin-vue-components/vite'
- import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'<strong>
- import Icons from 'unplugin-icons/vite' //图标
- import IconsResolver from 'unplugin-icons/resolver'</strong>
- // https://vitejs.dev/config/
- export default defineConfig({
- plugins: [
- vue(),
- AutoImport({
- // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
- imports: ['vue'],
- resolvers: [
- ElementPlusResolver(),
- <strong>// 自动导入图标组件
- </strong><strong> IconsResolver(),</strong>
- ],
- }),
- Components({
- resolvers: [
- ElementPlusResolver(),
- <strong>// 自动注册图标组件
- IconsResolver({
- enabledCollections: ['ep'</strong><strong>],
- }),</strong>
- ],
- }),
- //图标自动安装
- <strong> Icons({
- autoInstall: true</strong><strong>,
- }),</strong>
- ],
- resolve: {
- alias: { //配置路径别名
- '@': path.resolve(__dirname, 'src')
- }
- }
- })
复制代码
图标修改- <el-icon><<strong>Plus</strong> /></el-icon>
- <el-icon><<strong>Edit</strong> /></el-icon>
- <el-icon><<strong>Delete</strong> /></el-icon>
- <el-icon class="is-loading"><Loading /></el-icon>
复制代码 改成- <el-icon><<strong>Plus</strong> /></el-icon>
- <el-icon><<strong>Edit</strong> /></el-icon>
- <el-icon><<strong>Delete</strong> /></el-icon>
- <el-icon class="is-loading"><Loading /></el-icon>
复制代码 加前缀i-ep-、或IEp和iEp。
来源:https://www.cnblogs.com/MingQiu/p/18123315
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作! |
|