前言

大家好，我是 HoMeTown，最近不很忙，整理一套架子出来，有兴趣朋友可以看看，我自己已经投入生产使用了，大家看个人情况，选择性使用 GitHub仓库。

✨ hometown-h5-template 💥

轻松，简单，开箱即用 📦

GitHub仓库欢迎Star！🤩

简介

hometown-h5-template 是一个基于前端前沿技术栈、干净、开箱即用的前端H5解决方案。提供完善的前端H5开发环境，快速启动项目，为专注业务实现与开发，提高开发效率而生，也可用于学习参考。

预览

在线预览

技术选型

特性

最新技术栈： Vue3、TypeScirpt、Vite4、UnoCSS、Pinia 等前沿技术开发。
高效包管理工具： 使用pnpm作为首选包管理工具。
TypeScript： 应用程序级 JavaScript。
灵活的 CSS： 单一主题配置入口，强大的 CssVar。
开箱即用： 配置丰富，易上手，开箱即用。
monorepo架构 内置monorepo架构，你可以不用，我不能没有。
现代移动端自适应方案： 使用viewport

开发环境推荐

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 # 入口

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

END

求个 Star 🤩🤩🤩 GitHub仓库地址

下次见~ 我的朋友，我是HoMeTown👨‍💻‍，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。

👉 vx: hometown-468【单独拉你】

👨‍👩‍👧 公众号：秃头开发头秃了 【关注回复“进群”】

🤖 Github：HoMeTownSoCool【点开看看】