05_ElementPlus安裝過程

官網：一個 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。