Fes Design 开源项目教程

Fes Design 开源项目教程

fes-designVue3 组件库，Typescirpt 编写，高性能，支持按需引入、国际化、配置主题，适配低代码。项目地址:https://gitcode.com/gh_mirrors/fe/fes-design

1. 项目的目录结构及介绍

Fes Design 是一个基于 Vue 3 的组件库，其目录结构如下：

fes-design/
├── docs/                # 文档目录
├── examples/            # 示例代码
├── packages/            # 组件库源码
│   ├── components/      # 组件源码
│   ├── theme/           # 主题相关
│   ├── utils/           # 工具函数
│   └── index.ts         # 组件库入口文件
├── scripts/             # 构建脚本
├── tests/               # 测试代码
├── .eslintrc.json       # ESLint 配置文件
├── .gitignore           # Git 忽略文件配置
├── .npmignore           # NPM 忽略文件配置
├── package.json         # 项目依赖及配置
├── README.md            # 项目介绍文档
├── tsconfig.json        # TypeScript 配置文件
└── vite.config.ts       # Vite 配置文件

目录结构介绍

• docs/: 存放项目文档。
• examples/: 存放示例代码，用于展示组件的使用方法。
• packages/: 组件库的核心代码。
  • components/: 具体的组件实现。
  • theme/: 主题相关的样式和配置。
  • utils/: 工具函数和辅助代码。
  • index.ts: 组件库的入口文件，导出所有组件。
• scripts/: 构建和发布脚本。
• tests/: 测试代码，确保组件的稳定性和可靠性。
• .eslintrc.json: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置，指定哪些文件不纳入版本控制。
• .npmignore: NPM 忽略文件配置，指定哪些文件不发布到 NPM。
• package.json: 项目依赖及配置，包括脚本命令、依赖包等。
• README.md: 项目介绍文档，提供项目的基本信息和使用指南。
• tsconfig.json: TypeScript 配置文件，用于 TypeScript 编译选项。
• vite.config.ts: Vite 配置文件，用于项目构建和开发服务器配置。

2. 项目的启动文件介绍

Fes Design 的启动文件主要是 packages/index.ts，它是组件库的入口文件，负责导出所有组件。

// packages/index.ts
export { default as FButton } from './components/FButton';
export { default as CloseCircleFilled } from './components/icons/CloseCircleFilled';
// 其他组件导出

启动文件介绍

• packages/index.ts: 该文件导出了所有组件，使得用户可以通过 import { FButton } from '@fesjs/fes-design' 的方式引入组件。

3. 项目的配置文件介绍

Fes Design 的配置文件主要包括 package.json、tsconfig.json 和 vite.config.ts。

package.json

package.json 文件包含了项目的依赖、脚本命令和其他配置信息。

{
  "name": "@fesjs/fes-design",
  "version": "0.8.61",
  "description": "Vue3 组件库，Typescirpt 编写，高性能，支持按需引入、国际化、配置主题，适配低代码",
  "main": "dist/fes-design.umd.js",
  "module": "dist/fes-design.es.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0",
    "vite": "^2.0.0",
    "jest": "^27.0.0"
  },
  "license": "MIT"
}

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module

fes-designVue3 组件库，Typescirpt 编写，高性能，支持按需引入、国际化、配置主题，适配低代码。项目地址:https://gitcode.com/gh_mirrors/fe/fes-design