1
| npm install element-plus
|
自动导入
安装自动导入的插件:
1
| npm install -D unplugin-vue-components unplugin-auto-import
|
配置
vite
vite.config.js文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({ plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })
|
webpack
如果是webpack的话:vue.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| 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()], }), ], }
|
大功告成!从始至终没有动过main.js文件哦。是不是很简单,官方也推荐自动导入的方式呢
![](https://img-blog.csdnimg.cn/eff9f82f7dfc480b83be89a1068b1d1b.png)
使用组件
比如el-image
![](https://img-blog.csdnimg.cn/58bdc5b5d6e04a7baa42358e5af8ed3f.png)
![](https://img-blog.csdnimg.cn/9be61cb096094690b8bd4111ce3f3774.png)