farris-vue

README

<p align="center">
  <a href="#" target="_blank" rel="noopener noreferrer">
    <img alt="Farris UI Logo" src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/8d1758a831429938d8139b84.png"  style="max-width:50%;">
  </a>
</p>

<h1 align="center">Farris Vue</h1>

<p align="center">Farris Vue 是一套基于Farris Design</a> 的 Vue3 组件库。</p>

[English](https://gitee.com/ubml/farris-vue/blob/main/README.en.md) | 简体中文

Farris 设计原则：

-   <b>Fa</b>st : Farris Vue 是一套具有急速用户体验的 UI 套件，Farris Data Grid 在渲染大量数据时具有高速渲染性能
-   <b>R</b>eliable : 我们为用户提供可靠的使用体现，对各类异常交互场景做出针对性的优化
-   <b>R</b>esponsive : 增强的响应式设计，在组件内部提供更细腻的响应式交互
-   <b>I</b>ntuitive : 采用直觉化的设计，向用户更准确的传达界面交互
-   <b>S</b>mart : 智能化的 UI，满足开发智能应用的场景

## 1. 了解 Farris

可以访问我们的[官方站点(https://ubml.atomgit.net/farris-docs/)](https://ubml.atomgit.net/farris-docs/)了解 Farris UI Vue 组件。

也可以访问我们的知乎主页，了解Farris开源历程和技术细节。[知乎首页(https://www.zhihu.com/people/farris-design)](https://www.zhihu.com/people/farris-design)

## 2. 如何本地运行项目

### 2.1 检查环境

在本地运行本项目前，请先执行以下命令检查Node.js版本，本项目要求使用Node.js v18。
```
node -v
```

接下来执行以下命令，检查环境中是否已经安装 pnpm，本项目需要使用的pnpm版本为v9。

```
pnpm -v
```

如果未得到`pnpm`版本信息，请参考[安装 pnpm](https://pnpm.io/installation).

### 2.2 获取源代码

执行以下命令，获取项目源代码，并安装依赖组件。

```
git clone https://gitee.com/ubml/farris-vue.git
cd farris-vue
pnpm install
```

### 2.3 运行文档站点

执行以下命令。

```
pnpm --filter ui-vue run docs:dev
```

在浏览器中访问：`http://localhost:5173/` 查看示例页面。

![示例页面](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/e1db388f72e7223934b765a7.png)

### 2.4 使用文档站点

你可以访问示例页面站点：

1. 点击「快速开始」了解如何安装使用 Farris Vue。
2. 点击「组件」体验组件视觉和交互效果，查看组件 API 说明文档。

### 2.5 运行可视化设计器示例

执行以下命令。

```
pnpm --filter designer run dev --open #designer-canvas/drag-over
```

vite自动打开浏览器，显示可视化页面设计器，你可以预览采用低代码模式使用Farris UI的效果。

### 2.5 运行UI组件示例
执行`pnpm --filter ui-vue dev --open #{示例页面路由}`在浏览器打开示例页面，例如：
```
pnpm --filter ui-vue dev --open #data-grid/basic
```

## 3. 如何使用 Farris Vue

### 3.1 安装@farris/ui-vue

```
pnpm add @farris/ui-vue
```

```
npm install @farris/ui-vue
```

```
yarn add @farris/ui-vue
```

### 3.2 在应用中引入 Farris Vue

在`main.ts`文件中引入`@farris/ui-vue`。

```ts
import { createApp } from 'vue';
import App from './App.vue';
import Farris from '@farris/ui-vue';
import '@farris/ui-vue/style.css';

createApp(App).use(Farris).mount('#app');
```

### 3.3 在应用中使用 Farris Vue

在`App.vue`文件中使用 Farris Vue 组件。

```vue
<template>
    <f-button-edit></f-button-edit>
</template>
```

## 4. 如何开发 Farris Vue 低代码元组件

- [Farris Vue 低代码元组件开发指南](https://gitee.com/ubml/farris-vue/blob/main/how_to_develop_component.md)

## 5. 如何参与贡献

欢迎你参与贡献 Farris Vue
在这里你可以参与以下贡献内容：

-   使用 `TypeScript` + `TSX` + `SystemJs` + `Rollup` 技术开发 Farris Vue 组件
-   参与贡献 Farris 主题工具
-   参与贡献 Farris 开发文档

如果你决定参与贡献 Farris Vue，可以先从阅读我们的[贡献指南](https://gitee.com/ubml/farris-vue/blob/main/CONTRIBUTING.md)开始。

## 6. 协作
按照开放透明原则，我们会在邮件列表中公开讨论项目决策，可以「[订阅](https://lists.openatom.io/postorius/lists/ubml-dev.openatom.io/)」邮件列表接收最新资讯，参与技术讨论。

## 7. 路线图

- [Farris Vue 项目 2023 路线图](https://gitee.com/ubml/community/blob/master/sig/farris/roadmap.md)

## ✨ 贡献者

感谢以下 Farris Vue 的贡献者

<table>
  <!-- <tr>
    <td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://foruda.gitee.com/avatar/1662181279170802242/610337_chenshj_1662181279.png!avatar60" width="100px;" alt=""/><br /><sub><b>陈圣杰</b></sub></a><br /></td>
  </tr> -->
</table>

## 开源许可

[Apache License 2.0](https://gitee.com/ubml/farris-vue/blob/master/LICENSE)