Vue.js 3.0 学习笔记（十四）使用ElementPlus按需自动导入

前言

IDEA
vue cli5.0
vue3
element-plus

vue里面的vue.config.js相当于webpack.config.js，在vue项目中可直接通过修改vue.config.js修改webpack.config.js的默认配置

具体步骤参照官网
https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

具体步骤

1. 在配置前确保已经引入Element-Plus，若没有，通过如下命令引入

npm install element-plus --save

2. 使用如下命令安装两款插件

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

3. 修改vue.config.js文件

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //注意plugins放在外面会报错，必须加上configureWebpack
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }
})

到了此时理论上就可以直接使用了，而无需import导入

4. 添加element-plus组件

<template>
  <div>
    <el-button type="primary" @click="handleClick">Primary</el-button>
  </div>
</template>

<script>
export default {
  name: "element-plus",
  methods: {
    handleClick: function (e) {
      console.log('click', e)
    }
  }
}
</script>

<style scoped>

</style>

5. 在App.vue页面使用组件

<template>
  <ElementPlus></ElementPlus>
</template>

<script>
import ElementPlus from './components/element-plus.vue'

export default {
  name: 'App',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ElementPlus
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 显示结果如下