前言
大家好，我是 HoMeTown。
✨ hometown-h5-template 💥
轻松，简单，开箱即用 📦
简介
hometown-h5-template 是一个基于前端前沿技术栈、干净、开箱即用的前端H5解决方案。 提供完善的前端H5开发环境，快速启动项目，为专注业务实现与开发，提高开发效率而生，也可用于学习参考。
预览
技术选型
特性
- 最新技术栈： Vue3、TypeScirpt、Vite4、UnoCSS、Pinia 等前沿技术开发。
- 高效包管理工具： 使用pnpm作为首选包管理工具。
- TypeScript： 应用程序级 JavaScript。
- 灵活的 CSS： 单一主题配置入口，强大的 CssVar。
- 开箱即用： 配置丰富，易上手，开箱即用。
- monorepo架构 内置monorepo架构，你可以不用，我不能没有。
- 现代移动端自适应方案： 使用viewport。
- 集成docker： 为友友们解决环境困扰。
开发环境推荐
- node
v18.14.2 - npm
v6.14.17 - pnpm
v7.26.3 - vscode
v1.75.1
结构梳理
/src
assets # 资源目录
components # 组件目录
const # 常量目录
enum # 枚举值目录
hooks # 逻辑钩子目录
plugins # 插件目录
router # 路由目录
service # 服务目录
store # 状态管理工具
style # 样式目录
typings # 类型目录
utils # 工具目录
views # 页面目录
/App.vue
/main.ts # 入口
项目协同
项目内置 eslint + prettier + commintlint方案，极大程度上无需考虑项目规范问题。
提交流程
git add .
pnpm commit
git push origin xxx
env配置
项目内置了viteconf，极大程度上无需考虑打包问题，env文件变量解释如下：
VITE_APP_NAME # 项目名称
VITE_BASE_URL # publicPath
VITE_HASH_ROUTE # 使用hash或者history路由
VITE_HTTP_PROXY # 是否开启代理
VITE_HTTP_PROXY_PREFIX # 代理前缀（仅在上一项启用时有效）
VITE_HTTP_API_URL # 未启用代理时的服务端API domain
VITE_VISUALIZER # 是否开启打包分析
如何启动
本地环境
安装项目依赖
pnpm install
启动服务
pnpm run dev
Docker环境
构建镜像
pnpm docker:build
构建容器实例，启动服务
pnpm docker:server
END
求个 Star 🤩🤩🤩 GitHub仓库地址
下次见~ 我的朋友，我是
HoMeTown👨💻，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！群内十分活跃，至于有多活跃，你来了就知道了！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。👉 vx:
hometown-468👨👩👧 公众号：
秃头开发头秃了【关注回复“进群”】🤖 Github：HoMeTownSoCool
