qui-max:一个开源的拟物化设计风格的Vue组件库

qui-max综合来看是一个比较不错的UI组件,尤其是其拟物化的设计风格,不过Qui也不是没有缺点,比如支持的组件可能不如国内主流的ElementUI或者Antd那么多,因此如果其组件无法满足你的需求,那么则不建议在生产环境中使用

介绍

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


一个开源的拟物化设计风格的Vue组件库——qui-max

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

一个开源的拟物化设计风格的Vue组件库——qui-max

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

<template>
  <div></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    return {};
  },
});
</script>

一个开源的拟物化设计风格的Vue组件库——qui-max

然后使用你喜欢的包管理工具进行安装,以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

<template>
  <div>
    <q-input v-model="value" />
    <q-button
      type="primary"
      @click="handleClick"
    >
      我是按钮
    </q-button>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const value = ref("123");
    function handleClick() {
      alert(value.value);
    }
    return { value, handleClick };
  },
};
</script>
  • 按需引入(推荐)

我们也可以按需引入,在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预览

一个开源的拟物化设计风格的Vue组件库——qui-max
一个开源的拟物化设计风格的Vue组件库——qui-max
一个开源的拟物化设计风格的Vue组件库——qui-max
一个开源的拟物化设计风格的Vue组件库——qui-max
一个开源的拟物化设计风格的Vue组件库——qui-max
一个开源的拟物化设计风格的Vue组件库——qui-max

浏览器支持情况

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

总结

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

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/24985.html

发表评论

登录后才能评论