element-plus和vue3+vue/cli按需导入-自动导入

说明：

vue-cli创建的项目中如何按需引入element-plus的方法，主要是配置config(vuecli配置的是vue.config.js)

步骤

0.前提条件，你项目得先安装element-plus

npm install element-plus --save

1.官网推荐，安装自动导入插件

• 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

• 2.然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中，当然vue/cli配置的是vue.config.js
  项目根目录查看是否有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为vue.config.js里的webpack配置
  configureWebpack: {
    devServer: {
      port: 8888,
      open: true
    },
    // plugins配置里加下面的代码
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

其实只需要按钮官网 webpack.config.js去配置vue.config.js即可，在vue.config.js想配置webpack，只需要在参数configureWebpack做对应的配置即可

• 3.测试页面随便放点el的组件后npm 运行项目

<template>
  <div id="nav">
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </el-row>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

• 4.结果

  
  
  微信截图_20220223092148.png

成功运行，破若费