Quasar 中使用 Naive UI

Naive UI 这个组件库配色和交互做得比较用心，尝试在项目开发中引入。但肯定不能抛弃项目用的前端框架Quasar，毕竟Quasar在开发效率上带来的便利不是一个组件库能够替代的。

那么，怎么在Quasar工程中方便的使用 Naive UI呢？

这里推荐一个插件 ——unplugin-vue-components, 能够按需加载第三方组件库。

如果不用unplugin-vue-components， 我们在编写每个页面时，都要手动引入组件，非常麻烦。

import {
  NButton,
  useMessage,
  useDialog,
  NDataTable,
  NTag,
  NCard,
} from "naive-ui";

或者是全局引入，那么打包出来的体积比较大，造成资源浪费和用户体验下降。

用了unplugin-vue-components插件之后，就可以在模板中直接使用Naive UI 组件，无需手动引入。同时，它依然是按需引入，打包体积不会变大。

使用方法

unplugin-vue-components插件直接支持Naive UI组件，开箱即用。
直接在Quasar配置文件的vite插件上注册即可使用。

const { configure } = require("quasar/wrappers");
const Components = require("unplugin-vue-components/vite");
const { NaiveUiResolver } = require("unplugin-vue-components/resolvers");


module.exports = configure(function (/* ctx */) {
  return {
          //...
         build: {
             vitePlugins: [ Components({ resolvers: [NaiveUiResolver()] })],
        }
}
})