vue--03 element plus

1. 简介

• 文档：https://element-plus.gitee.io/zh-CN/

2. 安装使用

2.1 完整引入

• 安装

npm install element-plus --save

• main.js

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

2.2 按需自动导入

• 安装

npm install element-plus --save
npm i unplugin-vue-components unplugin-auto-import -D

• vue.config.js

• 项目根目录下创建文件vue.config.js
• vue3要使用node高版本，否则会不生效

// vue.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 = {
	configureWebpack: (config) => {
		config.plugins.push(
			AutoImport({
				resolvers: [ElementPlusResolver()]
			})
		)
		config.plugins.push(
			Components({
				resolvers: [ElementPlusResolver()]
			})
		)
	}
}