Vue.js 设计系统安装与配置指南

1. 项目基础介绍

本项目是基于 Vue.js 构建的一个设计系统，名为 "qui"，适用于构建 Web 应用程序。它提供了一系列 Vue 组件，图标包，颜色和网格系统，以及 Neumorphism 风格的设计，可以帮助开发者快速搭建出响应式和用户友好的界面。

主要编程语言：Vue.js (JavaScript)、SCSS

2. 项目使用的关键技术和框架

• Vue.js：一套构建用户界面的渐进式JavaScript框架。
• SCSS：Sassy CSS的简称，是一种CSS预处理器，使得开发者能够使用变量、嵌套规则、混合宏（mixins）等功能。
• Storybook：一个用于UI组件的开发、测试和展示的工具。

3. 项目安装和配置

准备工作

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

• Node.js（建议使用LTS版本）
• npm（Node.js包管理器）
• Vue CLI（Vue.js官方命令行工具）

安装步骤

步骤 1：克隆项目仓库

首先，您需要克隆项目到本地开发环境。打开命令行工具，执行以下命令：

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

步骤 2：安装依赖

进入项目目录，安装项目所需的依赖：

cd qui
npm install

或者，如果您更倾向于使用Yarn：

yarn install

步骤 3：启动 Storybook

安装完依赖后，您可以通过以下命令启动 Storybook：

npm run storybook

或者，使用Yarn：

yarn storybook

执行上述命令后，Storybook 将在本地的 http://localhost:6006 上启动，您可以在浏览器中查看和交互组件。

步骤 4：构建项目

当您完成开发工作后，可以构建项目以优化打包文件，执行以下命令：

npm run build

或者，使用Yarn：

yarn build

构建完成后，生成的静态文件将位于 dist 目录中。

以上步骤为您提供了从零开始配置和运行 "qui" 设计系统的基础指南。接下来，您可以参考项目的文档和示例代码，开始集成和使用提供的组件。