vue-cli項目 按需引入 element-plus #yyds幹貨盤點#

說明

具體步驟

1. 安裝插件

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

1. 配置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()],
            }),
        ]
    }
})
           

測試

<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>
           

結果：