说明：
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
成功运行，破若费
