TinyVue 开源项目教程

TinyVue 开源项目教程

tiny-vue TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-vue

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

TinyVue 是一个企业级的 UI 组件库，支持 Vue.js 2 和 Vue.js 3，同时适用于 PC 和移动端。以下是项目的目录结构及其简单介绍：

• examples/: 存放示例代码和页面。
• internals/: 包含项目的内部实现和工具。
• packages/: 包含所有的 TinyVue 组件。
• patches/: 包含对第三方库的修复和增强。
• .github/: 存放 GitHub 相关的配置文件和文档。
• .husky/: 包含 husky 相关的配置文件，用于在提交代码前执行预提交钩子。
• .vscode/: 包含 Visual Studio Code 的配置文件。
• public/: 存放静态文件，如图片和图标。
• src/: 包含组件的源代码。
• tsconfig.json: TypeScript 配置文件。
• tsconfig.vue2.json: Vue.js 2 的 TypeScript 配置文件。
• tsconfig.vue3.json: Vue.js 3 的 TypeScript 配置文件。
• package.json: 项目依赖和脚本配置文件。
• pnpm-workspace.yaml: pnpm 的工作空间配置文件。
• README.md: 项目说明文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 package.json 中定义的脚本。以下是几个关键的启动脚本：

• pnpm dev: 启动 Vue.js 3 的开发服务器。
• pnpm dev2: 启动 Vue.js 2 的开发服务器。

要启动项目，你需要在项目根目录下执行上述脚本之一。例如，如果你想要启动 Vue.js 3 的开发服务器，你可以运行：

pnpm dev

这将会启动一个本地服务器，通常地址是 http://127.0.0.1:7130/，你可以在浏览器中访问它来查看组件的示例。

3. 项目的配置文件介绍

项目的配置文件包括但不限于以下文件：

• .eslintrc.js: ESLint 配置文件，用于定义代码质量规则。
• .prettierrc: Prettier 配置文件，用于定义代码格式化规则。
• commitlint.config.js: Commitlint 配置文件，用于验证 Git 提交信息的格式。
• tsconfig.json: TypeScript 配置文件，定义了 TypeScript 编译器的选项。
• tsconfig.vue2.json 和 tsconfig.vue3.json: 分别为 Vue.js 2 和 Vue.js 3 定制的 TypeScript 配置文件。

这些配置文件帮助维护代码的一致性和质量，确保代码遵循项目定义的标准和规范。在开发过程中，你可能需要根据项目的具体需求来调整这些配置文件。

tiny-vue TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-vue