如何在 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-components
和 unplugin-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 的组件了