# farris-vue **Repository Path**: ubml/farris-vue ## Basic Information - **Project Name**: farris-vue - **Description**: Farris Vue 是一套基于Farris Design 的低代码开发套件。包括具有Fast Reliable Responsive Intuitive Smart 五大特性,面向企业信息化应用的UI组件,可视化主题编辑器,可视化低代码建模画布,低代码解析引擎,可扩展的低代码元组件框架,元组件工具箱,元组件属性面板等,可供社区开发者搭建场景化低代码建模工具。 - **Primary Language**: TypeScript - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: https://ubml.atomgit.net/farris-docs/ - **GVP Project**: Yes ## Statistics - **Stars**: 239 - **Forks**: 120 - **Created**: 2022-08-19 - **Last Updated**: 2025-06-13 ## Categories & Tags **Categories**: vue-extensions **Tags**: None ## README

Farris UI Logo

Farris Vue

Farris Vue 是一套基于Farris Design 的 Vue3 组件库。

[English](README.en.md) | 简体中文 Farris 设计原则: - Fast : Farris Vue 是一套具有急速用户体验的 UI 套件,Farris Data Grid 在渲染大量数据时具有高速渲染性能 - Reliable : 我们为用户提供可靠的使用体现,对各类异常交互场景做出针对性的优化 - Responsive : 增强的响应式设计,在组件内部提供更细腻的响应式交互 - Intuitive : 采用直觉化的设计,向用户更准确的传达界面交互 - Smart : 智能化的 UI,满足开发智能应用的场景 ## 1. 了解 Farris 可以访问我们的[官方站点(https://farris-design.gitee.io/farris-vue)](https://farris-design.gitee.io/farris-vue/)了解 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/` 查看示例页面。 ![示例页面](./farris_home_page.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 ``` ## 4. 如何开发 Farris Vue 低代码元组件 - [Farris Vue 低代码元组件开发指南](./how_to_develop_component.md) ## 5. 如何参与贡献 欢迎你参与贡献 Farris Vue 在这里你可以参与以下贡献内容: - 使用 `TypeScript` + `TSX` + `SystemJs` + `Rollup` 技术开发 Farris Vue 组件 - 参与贡献 Farris 主题工具 - 参与贡献 Farris 开发文档 如果你决定参与贡献 Farris Vue,可以先从阅读我们的[贡献指南](./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 的贡献者
## 开源许可 [Apache License 2.0](https://gitee.com/ubml/farris-vue/blob/master/LICENSE)