1. Project Overview

Farris Vue

Farris Vue is a Vue 3 component library based on Farris Design.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

Farris UI Vue is a Vue 3 component library based on Farris Design. It features five key qualities: Fast, Reliable, Responsive, Intuitive, and Smart.

Farris Design Principles:

• FaFast: Farris Vue is a UI toolkit designed to deliver an exceptionally fast user experience. Farris Data Grid offers high-speed rendering performance when handling large datasets.
• RReliable: We provide users with a reliable experience and implement targeted optimizations for various exceptional interaction scenarios.
• RResponsive: Enhanced responsive design with more refined responsive interactions built into components.
• IIntuitive: Uses intuitive design to communicate interface interactions to users more clearly.
• SSmart: An intelligent UI designed to meet the needs of smart application development.

5. Tech Stack

1. How to Run the Project Locally

1.1 Check the Environment

Before running the project locally, execute the following command to check whether yarn is installed in your environment.

yarn -v

If no yarn version information is displayed, please refer to the yarn installation guide.

1.2 Obtain the Source Code

Execute the following commands to obtain the project source code and install the dependencies.

npm install lerna -g
Visit Yifei Open Source: [https://code.exmay.com/](https://code.exmay.com/) to download
cd farris-vue
lerna bootstrap

2.3 Run the Demo Site

Execute the following command.

cd packages/ui-vue
yarn run docs:dev

Visit [http://localhost:5173/](http://localhost:5173/) in your browser to view the demo page.

1.4 Using the Demo Site

You can visit the demo site at:

1. Click "Quick Start" to learn how to install and use Farris Vue.
2. Click "Components" to explore the visual appearance and interactive effects of components and view their API documentation.

2. How to Use Farris Vue

2.1 Install @farris/ui-vue

npm install @farris/ui-vue

yarn add @farris/ui-vue

2.2 Import Farris Vue into Your Application

Import @farris/ui-vue in the main.ts file.

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');

2.3 Use Farris Vue in Your Application

Use Farris Vue components in the App.vue file.

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