Skip to content

quliangen/vue3-vant4-h5-template-ts

Folders and files

NameName
Last commit message
Last commit date
Dec 4, 2022
Sep 18, 2020
Dec 4, 2022
Sep 18, 2020
Sep 18, 2020
Sep 30, 2020
Sep 30, 2020
Sep 30, 2020
May 27, 2022
Sep 18, 2020
Sep 18, 2020
May 14, 2022
Sep 18, 2020
Dec 4, 2022
Dec 4, 2022
Dec 4, 2022
Sep 18, 2020
Dec 4, 2022
Apr 27, 2021
Dec 4, 2022
Nov 21, 2022
Dec 4, 2022

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 分支名称,可同步模板项目修改到子项目。