前言

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

✨ hometown-h5-template 💥

轻松，简单，开箱即用 📦

GitHub仓库 欢迎Star！🤩

简介

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

预览

在线预览

技术选型

• Vue3 v3.2.31
  

• TypeScript v4.9.5
  

• Vite v4.1.1
  

• VantUI v4.0.10
  

• Pinia v2.0.13
  

• UnoCSS v0.49.4
  

• sass v1.49.11
  

特性

• 最新技术栈： 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 # publicPathVITE_HASH_ROUTE # 使用hash或者history路由VITE_HTTP_PROXY # 是否开启代理VITE_HTTP_PROXY_PREFIX # 代理前缀（仅在上一项启用时有效）VITE_HTTP_API_URL # 未启用代理时的服务端API domainVITE_VISUALIZER # 是否开启打包分析

如何启动

安装项目依赖

pnpm install

启动服务

pnpm run dev

END

求个 Star 🤩🤩🤩 GitHub仓库地址

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

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

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

🤖 Github：HoMeTownSoCool【点开看看】