问题描述

官网对于element-plus在vite.config.js和webpack.config.js中实现按需导入，是真的详细，但是在vue.config.js中却没有多说

问题解决

1、下载element-plus 和 自动导入插件

npm install element-plus --save （不加–save默认就是–save）

npm install -D unplugin-vue-components unplugin-auto-import

2、vue.config.js配置

const path = require('path')
// element-plus 按需导入
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// element-plus 按需导入
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  pluginOptions: {
    // less自动注入
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.join(__dirname, "./src/assets/styles/variables.less"),
        path.join(__dirname, "./src/assets/styles/mixins.less"),
      ],
    },
  },
};

3、main.js导入样式（样式不能按需导入，得全部导入）

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'normalize.css'
import '@/assets/styles/common.less'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).mount("#app");

4、使用

<template>
  <nav>头部</nav>
  <nav>个人信心</nav>
  <el-button type="primary">I am ElButton</el-button>
  <router-view></router-view>
</template>
<script>

import { ElButton } from 'element-plus'
export default {
  name: "Layout",
  setup () {
    return {};
  },
};
</script>
<style lang='less' scoped>
</style>

5、效果