%20(2).svg)
项目简介
本项目是一个基于 Vue 3 和 TypeScript 的前端开发模板，采用 Vite 作为构建工具，融合了客户端渲染（CSR）与服务端渲染（SSR）技术。在技术选型上全面考量多种因素，支持国际化，利于团队协作开发。对 Axios 进行封装，使用 husky 规范 git 提交，拥有良好的代码结构与可维护性。
项目的主要特性和功能
- 技术选型全面：综合国际化、SEO 优化、服务端渲染、第三方框架、技术栈、代码管理、多端兼容、响应式布局、PWA、微前端架构等多方面因素进行技术选型。
- 服务端渲染方案：提供同构渲染 SSR 的两种方案，即 Nuxt3 框架和单页面渐进式服务端渲染方案。对比传统服务端渲染（SSR）、客户端渲染（CSR）和同构渲染优缺点，实现同构渲染提升首屏加载速度和 SEO 效果。
- 规范的代码管理：用 husky 触发 git 提交规范，结合 commitizen 和 commitlint 确保提交信息规范，提交前进行代码格式校验。
- HTTP 请求封装：集成并封装 Axios，实现请求和响应拦截，提供便捷的 GET 和 POST 请求方法。
- 国际化支持：具备国际化语言配置，便于多语言开发。
安装使用步骤
安装依赖
在项目根目录下运行以下命令安装所需依赖：
bash
npm install
配置 git 提交规范
依次执行以下命令来配置 git 提交规范：
bash
npx husky-init ; npm install
npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact
在 package.json 的 script 中添加命令 "commit":"cz"。
安装 commitlint：
bash
npm i @commitlint/config-conventional @commitlint/cli -D
在项目根目录创建 commitlint.config.cjs 并进行如下配置：
javascript
module.exports = {
extends: ['@commitlint/config-conventional']
}
使用 husky 生成的 commit-msg 文件验证提交信息：
bash
npx --no-install commitlint --config commitlint.config.cjs --edit $1
在 pre-commit 中添加代码格式校验命令：
bash
npm run lint
运行项目
开发环境
在开发环境下使用客户端渲染运行项目，执行以下命令：
bash
npm run dev
生产环境（SSR）
先进行 SSR 构建：
bash
npm run build:ssr
然后启动 Node 服务：
bash
node server.js
提交代码
提交代码时，使用以下命令确保符合提交规范：
bash
npm run commit
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】