前言

大家好，我是 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

结构梳理

/srcassets # 资源目录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【点开看看】

高赞好文

• 涨工资、打游戏、谈对象、耍掘金！｜2022年终总结

• 羊了个羊 🐑 一夜爆火，我却开始偷偷抹眼泪…

• 分享 11 张巨好看的PC端界面！！!

• 敢在我工位装摄像头？吃我一套JS ➕ CSS组合拳！！👊🏻

• 前端老司机 70+ 实用工具网站分享（建议收藏！）🔥🔥

• 【Git】 什么！？都快2023年了还搞不清楚 git rebase 与 git merge！？😮

• 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！