网站首页 > 基础教程 正文
介绍
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文件
<template>
<div></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
setup() {
return {};
},
});
</script>
然后使用你喜欢的包管理工具进行安装,以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预览
浏览器支持情况
- safari: >11
- chrome: >=61
- firefox: >=58
- opera: >=62
- edge: >=16
- yandex: >=18
总结
qui-max综合来看是一个比较不错的UI组件,尤其是其拟物化的设计风格,不过Qui也不是没有缺点,比如支持的组件可能不如国内主流的ElementUI或者Antd那么多,因此如果其组件无法满足你的需求,那么则不建议在生产环境中使用,而是选择目前业界主流的组件库,但是无论如何其设计思想和源代码还是值得我们学习的!
猜你喜欢
- 2024-12-23 JavaScript开源良心插件,纯前端网页图片剪裁插件——cropperjs
- 2024-12-23 用友UAP马太航:解析移动开发中响应式布局
- 2024-12-23 openCVjs图像处理之自动矫正 opencv 自动化
- 2024-12-23 NodeJS性能调优之GC调优(值得收藏)
- 2024-12-23 Cycling 74 推出 Max 9 交互式编程 软件
- 2024-12-23 qunit/mocha/jest在nodejs下的集成测试原理分析
- 2024-12-23 JS基础与高级应用: 性能优化 css js性能优化
- 2024-12-23 LeetCode 力扣官方题解 | 1614. 括号的最大嵌套深度
- 2024-12-23 FStorm Render v1.5.7J for 3dmax2016-2025(3dmax插件)安装教程
- 2024-12-23 兄弟们我忍不住下山了,买了个2022年产的RX580
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)