创建项目的过程我就不详细描述了,直接从element plus 的引入说起
一、按照官网的三种方式引入 element
二、安装所需插件
npm install -D unplugin-vue-components unplugin-auto-import
三、创建vue.config.js文件
按照官网方式写入如下代码
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
此时在启动的时候报错
四、解决
添加 configureWebpack其他配置
代码如下
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
configureWebpack:{
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
}
此时yarn serve 代码正常启动
五、解决ElMessage 等组件无样式问题(大意了,没有闪)
在main.ts中引入样式文件,完美解决
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
createApp(App).mount('#app')