vue-cli项目 按需引入 element-plus #yyds干货盘点#

Posted 2021-12-29 梁云亮

说明

vue-cli创建的项目中如何按需引入element-plus，官网没有说明清楚。

具体步骤

1. 安装插件

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

2. 配置vue.config.js

   
   const defineConfig = require(@vue/cli-service)

const AutoImport = require(unplugin-auto-import/webpack)
const Components = require(unplugin-vue-components/webpack)
const ElementPlusResolver = require(unplugin-vue-components/resolvers)

module.exports = defineConfig(
transpileDependencies: true,
devServer:
port: 8888
,
configureWebpack:
plugins: [
AutoImport(
resolvers: [ElementPlusResolver()],
),
Components(
resolvers: [ElementPlusResolver()],
),
]

)

新增加内容为：
![SGJWNDVPRKVXTDBGS5NC7.png](https://s2.51cto.com/images/20211228/1640663944932907.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

## 测试
```html
<template>
  <h2>Home</h2>

  <el-row>
    <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="/about">About</router-link>
</template>

<script>
export default 
  name: "Home"

</script>

<style scoped>

</style>

结果：