Qui-Max 安装与配置指南

Qui-Max 安装与配置指南

1. 项目基础介绍

Qui-Max 是一个基于 Vue 3.x 的 Neumorphic 设计系统，使用 TypeScript 语言和 Composition API 进行编写。它是一组 Vue 组件的集合，可以帮助开发者构建出色的产品界面。

2. 关键技术和框架

• 编程语言: TypeScript
• 框架: Vue 3.x
• 设计理念: Neumorphism (新拟态设计)
• 构建工具: Vite
• 测试框架: Vitest
• 代码风格: Prettier, Stylelint, ESLint

3. 安装和配置

准备工作

在开始之前，请确保您的开发环境中已经安装了以下工具：

• Node.js (推荐使用 LTS 版本)
• npm 或 yarn 包管理器

安装步骤

步骤 1: 克隆项目

首先，您需要克隆项目到本地开发环境。

git clone https://github.com/altai-ui/qui-max.git
cd qui-max

步骤 2: 安装依赖

接着，在项目目录中安装所有依赖。

npm install
# 或者
yarn install

步骤 3: 运行项目

安装完依赖后，您可以使用以下命令启动开发服务器。

npm run dev
# 或者
yarn dev

现在，项目应该已经在本地启动并运行，您可以通过浏览器访问 http://localhost:3000 查看效果。

步骤 4: 配置项目

如果需要配置项目，比如更改语言、组件样式或集成到 Nuxt 3 项目中，请按照以下步骤操作。

配置语言和样式

在项目主文件（如 main.js）中，您可以按照以下方式配置语言和组件样式：

import { createApp } from 'vue';
import Qui from '@qvant/qui-max';
import '[@qvant/qui-max/styles]'; // 引入所有样式
import localeRu from '@qvant/qui-max/locales/ru'; // 引入俄语语言包

const app = createApp(App);

app.use(Qui, {
  localization: {
    locale: 'ru', // 设置语言为俄语
    messages: {
      ru: {
        ...localeRu,
        QDatepicker: {
          placeholder: 'Выберите дату рождения' // 自定义文本
        }
      }
    }
  }
});

app.mount('#app');

集成到 Nuxt 3

如果要在 Nuxt 3 项目中使用 Qui-Max，请按照以下步骤操作：

1. 在 Nuxt 3 的插件目录（通常是 plugins/）中创建一个新文件，比如 qui.ts：

// plugins/qui.ts
import { defineNuxtPlugin } from '#imports';
import Qui from '@qvant/qui-max';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Qui);
});

2. 在 nuxt.config.ts 文件中添加以下配置：

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
  css: [
    '@qvant/qui-max/styles'
  ],
  build: {
    transpile: [
      '@qvant/qui-max'
    ]
  }
});

以上步骤为您提供了从零开始配置和运行 Qui-Max 的基本指南。根据您的具体需求，可能还需要进一步的定制和配置。