介绍

qui-max是一个基于Vue框架下设计的一套具有拟物化设计风格的开源组件库，同时支持#Vue3#和#Vue2#，Qui的出现是为了让用户有更好的体验！目前Vue3.0正式版也越来越多人使用，本文以Vue3为例进行简要的介绍（后文UI预览）！

Github开源

https://github.com/Qvant-lab/qui-max

目前有哪些特性？

• 1、30 多个 Vue 3 组件
• 2、完全用 Composition API 编写
• 3、typescript
• 4、图标包
• 5️、colors & grid
• 6、拟物化 UI 设计风格

安装使用

首先创建一个Vue3的项目，笔者使用vite进行创建（有关vite相关的知识，感兴趣的小伙伴可以在网上学习下，有详细的中文文档）：

yarn create @vitejs/app qui-demo --template vue
yarn

这里我们方便演示，我们删除demo中的HelloWorld组件，然后改造一下App.vue文件

然后使用你喜欢的包管理工具进行安装，以npm和yarn为例

npm install @qvant/qui-max -S
yarn add @qvant/qui-max

• 全局引入（不推荐）

改造一下main.js文件

import { createApp } from "vue";
import App from "./App.vue";
import Qui from "@qvant/qui-max";
import "@qvant/qui-max/styles";
const app = createApp(App);
app.use(Qui);

App.vue

• 按需引入（推荐）

我们也可以按需引入，在main.js中进行配置

import { createQui, QButton } from '@qvant/qui-max';

import '@qvant/qui-max/css/main';
import '@qvant/qui-max/fonts';
import '@qvant/qui-max/icons';

import '@qvant/qui-max/css/q-button';

const Qui = createQui({
  localization: {
    // 配置语言，默认是俄文，官方未支持中文，Qui集成了国际化，可以自己写配置文件
    locale: 'en',
    customI18nMessages: {
      en: {
        QDatepicker: {
          placeholder: 'Pick your birthday!'
        }
      }
    },
    zIndexCounter: 3000
  }
});

app.use(Qui);
app.use(QButton);

UI预览

浏览器支持情况

• safari: >11
• chrome: >=61
• firefox: >=58
• opera: >=62
• edge: >=16
• yandex: >=18

总结

qui-max综合来看是一个比较不错的UI组件，尤其是其拟物化的设计风格，不过Qui也不是没有缺点，比如支持的组件可能不如国内主流的ElementUI或者Antd那么多，因此如果其组件无法满足你的需求，那么则不建议在生产环境中使用，而是选择目前业界主流的组件库，但是无论如何其设计思想和源代码还是值得我们学习的！