注意:以下配置作者使用的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
最终页面效果
我是马丁的车夫,欢迎转发收藏!