05_ElementPlus安装过程

  • 05_ElementPlus安装过程已关闭评论
  • 47 次浏览
  • A+
所属分类:.NET技术
摘要

官网:一个 Vue 3 UI 框架 | Element Plus (element-plus.org)1.安装:运行cmd,转到我的项目的目录下vuedemo ,执行命令:npm install element-plus –save

官网:一个 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 组件库 import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能  import 'element-plus/dist/index.css' //导入 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); app.use(ElementPlus); 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 样式 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');

 

------------------------------------------------------------------------------------------漂亮的分割线------------------------------------------------------------------------------------------------------

上面是整体导入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  import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'  // https://vitejs.dev/config/ export default defineConfig({   plugins: [     vue(),      AutoImport({       // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等       imports: ['vue'],         resolvers: [         ElementPlusResolver(),       ],     }),     Components({       resolvers: [         ElementPlusResolver(),       ],     }),     ],   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' import Icons from 'unplugin-icons/vite' //图标 import IconsResolver from 'unplugin-icons/resolver'  // https://vitejs.dev/config/ export default defineConfig({   plugins: [     vue(),      AutoImport({       // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等       imports: ['vue'],         resolvers: [         ElementPlusResolver(),         // 自动导入图标组件         IconsResolver(),       ],     }),     Components({       resolvers: [         ElementPlusResolver(),         // 自动注册图标组件         IconsResolver({           enabledCollections: ['ep'],         }),       ],     }),     //图标自动安装     Icons({       autoInstall: true,     }),     ],   resolve: {     alias: { //配置路径别名       '@': path.resolve(__dirname, 'src')     }   } })

 

图标修改

<el-icon><Plus /></el-icon>         <el-icon><Edit /></el-icon>         <el-icon><Delete /></el-icon>         <el-icon class="is-loading"><Loading /></el-icon>

改成

 <el-icon><i-ep-Plus /></el-icon>         <el-icon><IEpEdit /></el-icon>         <el-icon><iEpDelete /></el-icon>         <el-icon class="is-loading"><Loading /></el-icon>

加前缀i-ep-、或IEp和iEp。