如何在 quasar 中按需引入 element plus

观点

首先个人建议是不要在一个框架里面引入另一个框架,因为 quasar 本身已经很大了,再引入一个 element plus 势必会导致代码体积进一步增大。

方法

如果你还是执意要再 quasar 里面引入别的框架,可以按照下述方法,

打开对应的官网,找到安装和按需引入的章节,查看相关的内容,下面拿 element 举例子

安装


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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

按需引入

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

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

然后修改对应的配置,针对 vite 和 webpack 有不同的配置:

vite 版本

修改 quasar.config.js 中的 build 对象中的vitePlugins,如下:

      vitePlugins: [
        [
          "unplugin-auto-import/vite",
          {
            resolvers: [
              require("unplugin-vue-components/resolvers").ElementPlusResolver(),
            ],
          },
        ],
        [
          "unplugin-vue-components/vite",
          {
            resolvers: [
              require("unplugin-vue-components/resolvers").ElementPlusResolver(),
            ],
          },
        ],
      ],

webpack 版本

修改 quasar.config.js 中的 build 对象中的chainWebpack,如下

      chainWebpack(chain) {
        chain.plugin('unplugin-auto-import').use(
          AutoImport({
            resolvers: [ElementPlusResolver()],
          })
        );

        chain.plugin('unplugin-vue-components').use(
          Components({
            resolvers: [ElementPlusResolver()],
          })
        );
      },

配置完之后就可以在 vue 文件中直接使用 elelment 的组件了