企业官网建设流程全解析

farris-vue

farris-vue是一套基于Farris Design 的 Vue3 组件库。farris的含义是Fast、Reliable、Responsive、Intuitive、Smart。下面将介绍如何在本地运行项目和使用farris-vue。如若有本文描述不清晰的地方，可以前往farris-vue查看更多细节。

1 本地运行项目

1.1 环境检查

在本地运行项目需要使用到node和pnpm，项目要求使用Node.js v18，pnpm版本为v9。可通过以下命令检查版本：
node -v
pnpm -v

1.2 pnpm安装与配置

其中pnpm可以通过以下命令安装，可指定版本（默认最新版本）：
npm install -g pnpm@<版本号>
例如安装7.0.0版本：
npm install -g pnpm@7.0.0

1. 安装完成后配置taobao镜像：
   pnpm congif set registry https://registry.npmmirror.com
2. 配置pnpm全局安装路径
   pnpm config set global-dir "D:\pnpm\global"
3. 配置pnpm全局bin文件安装路径
   pnpm config set global-bin-dir "D:\pnpm\global-bin"
4. 配置pnpm cache路径
   pnpm config set cache-dir "D:\pnpm\cache"
5. 配置pnpm state路径
   pnpm config set state-dir "D:\pnpm\state"
6. 配置pnpm store路径
   pnpm config set state-dir "D:\pnpm\store"

1.3 获取源代码

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

运行效果如下图：

可能遇到的问题：
可以通过执行pnpm approve-builds，pnpm会列出所有待批准的依赖，使用"空格"勾选，按"回车"确认。建议全选（按"a"全选），然后"回车"。之后重新执行pnpm install。

1.4 运行站点文档

pnpm --filter ui-vue run docs:dev

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

注：作者按照源码地址的README.md继续运行后续可视化设计器示例和UI组件示例时出现打开网页为空白的情况，以为是端口冲突的问题，尝试解决后未果。目前还尚未能解决，如果有大佬知道如何解决请帮帮我！

2 使用farris-vue

下面将展示使用npm安装farris-vue的流程，如果需要使用pnpm或yarn安装，请查看源代码README.md。

2.1 安装@farris/ui-vue

在vue项目下执行npm安装命令：

npm install @farris/ui-vue

成功后如图所示：

2.2 在应用中引入Farris Vue

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

import { createApp } from 'vue' import App from './App.vue' import Farris from '@farris/ui-vue'; import '@farris/ui-vue/index.css'; createApp(App).use(Farris).mount('#app')

2.3 在应用中使用Farris Vue

在App.vue中添加Farris Vue组件：

<template> <div> <f-button style="margin: 5px"> 主要按钮 </f-button> <f-button style="margin: 5px" :type="'danger'"> 危险按钮 </f-button> <f-button style="margin: 5px" :type="'success'"> 成功按钮 </f-button> <f-button style="margin: 5px" :type="'warning'"> 警告按钮 </f-button> <f-button style="margin: 5px" :type="'secondary'"> 信息按钮 </f-button> <f-button style="margin: 5px" :type="'link'"> 文本按钮 </f-button> </div> </template>

效果如下图所示：

至此完成farris-vue的安装与使用方法。
后续如果需要更多的使用说明，可在本地farris vue目录下执行指令运行farris vue文档进行查阅，指令如下：

pnpm --filter ui-vue run docs:dev

2026-07-28