hometown-h5-template 一个开箱即用的前端H5解决方案

前言

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

✨ hometown-h5-template 💥

轻松，简单，开箱即用 📦

GitHub仓库 欢迎Star！🤩

简介

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

预览

在线预览

image.png

image.png

技术选型

特性

• 最新技术栈： 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

🤩🤩🤩 GitHub仓库地址

下次见~ 我的朋友，我是HoMeTown👨‍💻‍