Skip to content

quliangen/vue3-vant4-h5-template-ts

Repository files navigation

vue3-vant4-h5-template-ts Build Status

预览地址(h5项目请自行f12):https://quliangen.github.io/vue3-vant4-h5-template-ts/

Features:

  1. vue3 + vue-router4 + pinia
  2. vant4(unplugin-vue-components 按需import组件)
  3. axios(0.20.0) + 封装示例 + devServer配置示例
  4. less
  5. h5 px 2 viewPort
  6. eslint + prettier (风格校验 + 一键修复)
  7. travis CI push代码自行构建gh-pages
  8. 页面demo:基于vant-demo/base 购物车及详情页(已删除)
  9. 集成:plop

RoadMap:

  1. styleLint
  2. changLog
  3. 定制主题

配置项目本地服务代理设置(⭐️⭐️⭐️)

  • 配置项目服务器:复制.env.development.local.demo文件并重命名为:.env.development.local,根据实际需要配置 VUE_APP_BASE_API,具体配置看.local文件内的注释说明, .local为本地文件已添加gitignore,此项必须配置否则pnpm serve找不到配置文件

Project setup

pnpm i

Compiles and hot-reloads for development

pnpm serve

Compiles and minifies for production

pnpm build

Run your unit tests

pnpm test:unit

Lints and fixes files

pnpm lint

Run plop create components

pnpm plop:cmp

Run plop create view

pnpm plop:view

Customize configuration

See Configuration Reference.

模板项目正确使用姿势:

说明:此方法适合小微团队,有多个相同技术栈子项目的开发场景。

目标:利用模板项目统一管理多个子项目技术栈。

适用: 中后台项目、H5项目

注意:此方法适用git共享仓,模板项目可向子项目merge,子项目不可pull到模板项目污染模板。

Tips: 说了这么多此方法其实就是人肉手动版的github fork。

具体步骤:

  1. 先行体验并查阅本项目技术栈是否适合贵司业务及技术栈
  2. 方法:
  • 拉取项目到本地(修改为贵司模板后)推送到私有git/gitLab仓
  • 创建新的H5项目时,拉取贵司模板到本地,修改git remote origin源为template,添加子项目私有仓为origin,推送到子项目仓。
  • 后续依赖包升级、基础框架升级、公共模块开发等,在模板项目中开发后,子项目中 git pull template 分支名称,可同步模板项目修改到子项目。