【源码】基于 Vue3 和 TypeScript 的 Web 前端基础项目

项目简介

本项目是基于 Vue3 和 TypeScript 构建的 Web 前端基础项目。它集成了 Vue 全家桶（Vue3、Vue Router、Vuex）、Axios、Ant Design Vue 等常用库，还配备了代码检查、格式化、提交规范、文档生成、测试用例等完善的开发工具和流程，为前端项目开发提供了良好的基础架构。

项目的主要特性和功能

1. 组件编写：支持以 .vue、.tsx 或 .ts 文件编写页面，支持 defineComponent 和 class - component 写法，有智能提示。
2. 样式配置：通过 Webpack 配置实现全局样式自动注入、全局 Less 变量配置以及自定义 UI 库主题颜色。
3. 网络请求：基于 Axios 封装脱离具体业务逻辑的网络请求，支持编写脱离浏览器环境的测试用例，便于后续根据后台应用接口进行业务封装。
4. 数据状态管理：建立应用数据状态管理，编写简易读取的 mutation 方法并完善类型，支持多模块自动装载和持久化。
5. UI 库：引入 Ant Design Vue 并支持组件按需加载，将 UI 库部分功能（如 message）添加到每个组件实例。
6. 插件与常用工具函数：引用常用工具函数和常用 hook。
7. 配置：分离开发、测试、生产环境的 Webpack 配置，添加常用插件优化打包；根据环境配置 Vue CLI 环境变量和应用全局静态常量；完成 TypeScript 相关配置并增加编辑器配置。
8. 开发工具：使用 ESLint 进行代码检查，Prettier 进行代码格式化，保证规则一致；采用 Git cz commitizen 统一代码提交规范；为无类型的库和变量添加 shims。
9. CI/CD：配置自动构建和持续集成配置文件，可结合具体项目部署情况使用。
10. 文档：使用 Typedoc 搭建项目文档应用，结合提交规范自动生成版本更改历史（Changelog），并配置 http - server 启动文档应用。
11. 测试用例：支持编写 JavaScript 和 TypeScript 的测试用例。

安装使用步骤

安装依赖

bash yarn install npm install

开发模式

bash yarn serve npm run serve

生产环境

bash yarn build npm run build

测试用例

• API 模块开发环境下单元测试 bash npm run test-dev:api
• API 模块常规单元测试 bash npm run test:api

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】