element plus 按需引入

最新推荐文章于 2024-09-18 22:30:24 发布

逆风优雅

最新推荐文章于 2024-09-18 22:30:24 发布

阅读量1.5k

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44603011/article/details/128818498

版权

vue3 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

首先安装依赖：

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

其次安装按需引入的插件

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

再次如果项目中有 webpack.config.js 这个文件，就将下面的代码复制到该文件

// webpack.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 = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

如果项目没有这个文件，可以使用下面两种

1. 可以新建这样一个文件，将内容复制其中。

2. 在原来的vue.config.js文件中配置

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

// webpack.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 = defineConfig({
  transpileDependencies: true,
  configureWebpack:{ // webpack配置的东西写在里面
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})