Element-plus五步完成使用(按需引入減小打包后體積),文件抽離集中管理

注意：以下配置作者使用的vue create vuelic3 創建的vue，vite腳手架沒有測試過。

1.安裝依賴

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
npm install @element-plus/icons-vue

 

2.項目根目錄創建webpack.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 = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

 

3.創建文件目錄抽離element-plus組件注冊並集中文件管理

　　1).在src文件下面創建global文件夾

　　2).global文件夾里創建index.ts和register-element.ts

 

4.global文件下面的index.ts代碼和register-element.ts管理注冊

index.ts

import { App } from 'vue'
import registerElement from './register-element'

export function globalRegister(app: App): void {
  app.use(registerElement)
}

register-element.ts

import { App } from 'vue'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'


// element-plus組件注冊
import {
  ElButton
} from 'element-plus'

const component = [
  ElButton
]


// element-plus-ions注冊
import {
  Location, Document, Flag,
  Menu as IconMenu, List, Switch,
  Setting, GoodsFilled, Message
} from '@element-plus/icons-vue'

const icons = [
  GoodsFilled, Setting, Message, List, Switch,
  IconMenu, Document, Location, Flag
]


export default function (app: App): void {
  const components = [...icons, ...component]
  for (const component of components) {
    app.component(component.name, component)
  }

}

 

5.在main.ts入口文件引用 最后頁面使用element-plus組件內容

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { globalRegister } from './global' //引入
createApp(App).use(globalRegister).use(store).use(router).mount('#app')

任意頁面調用

 

運行：

npm run serve

最終頁面效果

 

 

 

我是馬丁的車夫，歡迎轉發收藏！