Vue.js设计系统 Qui 使用指南

1. 项目介绍

Qui 是一个基于 Vue.js 的设计系统，旨在帮助开发者构建响应式、用户友好且轻量级的前端产品。该系统为 Vue 2.x 提供了30多个组件、图标包、颜色和网格系统以及 Neumorphism 风格的样式。同时，它还提供了一个 Storybook 沙盒，方便开发者实验和学习。

2. 项目快速启动

安装

通过 CDN

在 HTML 文件中引入 CSS 和 JavaScript 文件：

<!-- 引入 CSS -->
<link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css">
<!-- 引入 JavaScript -->
<script src="https://unpkg.com/@qvant/qui/dist/qui.umd.min.js"></script>

通过 Npm 或 Yarn

在项目根目录下运行以下命令：

npm install @qvant/qui -S
# 或者
yarn add @qvant/qui

配置 Vue 项目

在 main.js 文件中引入并使用 Qui：

import Vue from 'vue';
import Qui from '@qvant/qui';
import '@qvant/qui/dist/qui.css';

Vue.use(Qui);

使用组件

在你的 Vue 组件中，可以直接使用 Qui 提供的组件。例如，使用 q-input 组件：

<template>
  <q-input v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  }
};
</script>

3. 应用案例和最佳实践

以下是一些使用 Qui 组件构建的界面示例：

• 使用 q-input 创建输入框
• 使用 q-button 创建按钮
• 使用 q-datepicker 创建日期选择器

确保查看每个组件的 Storybook 文档，以了解如何正确使用它们。

4. 典型生态项目

Qui 可以与其他生态系统项目配合使用，例如：

• 使用 Vue Router 进行页面路由管理
• 使用 Vuex 进行状态管理
• 使用 Axios 进行 HTTP 请求

确保你的项目已经安装并正确配置了这些依赖项，以便与 Qui 无缝集成。

以上就是关于 Qui 设计系统的基本指南，希望对您的项目开发有所帮助。