一个vue3快速启动模板。
现在提供2个模板给到大家,基于不同的组件库实现,后续插件将会开启广告配置,各位不同担心,因为模板代码已开源,可以到Github或者Gitee下载本模板。
🔥 Git仓库 (Github) 🚀 Git仓库 (Gitee)
🔥 Git仓库 (Github) 🚀 Git仓库 (Gitee)
基于uni-app和fant-mini-plus的vue3项目基础模板,使用vue3、vite4、fant-mini-plus、pinia、uni-mini-router、axios、fant-axios-adapter开发,基于koa实现mock功能
- 🚀 使用vue3/vite4/pinia/axios等主流框架开发
- 🚀 引入fant-mini-plus组件库,开箱即用
- 💪 引入Eslint/Prettier,统一前端代码风格
- 💪 引入lint-staged/husky/commitlint/commitizen/standard-version,统一代码提交规范,自动生成版本发布日志
- 💪 使用pinia,并支持持久化存储
- 💪 提供koa-mock本地mock服务
- 💪 支持axios取消请求(基于requestTask.abort()实现)
插件市场会将类似
.eslintrc.js
这种以.
开头的文件忽略掉,故我将.
改成了_
上传。如果直接在插件市场下载,需要手动将_
改为.
,涉及文件及目录包含_husky
、_vscode
、_env.development
、_env.production
、_eslintignore
、_eslintrc.js
、_git-cz.json
、_gitignore
、_prettierrc
。或者到gitee上clone
或fork
功能 | 依赖库 |
---|---|
组件库 | fant-mini-plus |
路由(name跳转和导航守卫) | uni-mini-router |
网络请求(支持取消请求) | axios fant-axios-adapter |
代码规范 | Eslint Prettier |
提交规范 | lint-staged husky commitlint commitizen |
发布日志 | standard-version |
状态管理 | pinia (自定义插件实现持久化) |
uniapp-vue3-fant-ts
├─ .env.development----------------------------------环境变量文件dev时生效,VITE_BASEURL为接口地址
├─ .env.production-----------------------------------环境变量文件build时生效,VITE_BASEURL为接口地址
├─ .eslintignore-------------------------------------eslint豁免校验的配置,配置的文件免于eslint校验
├─ .eslintrc.js--------------------------------------eslint配置,指定eslint校验规则
├─ .gitignore
├─ .husky--------------------------------------------git hooks,此处配置了pre-commit和commit-msg两个
├─ .prettierrc---------------------------------------prettier配置,指定prettier校验规则
├─ .vscode-------------------------------------------vscode配置,实现保存的时候格式化
├─ CHANGELOG.md--------------------------------------版本发布日志
├─ README.md
├─ commitlint.config.js------------------------------commitlint配置文件
├─ index.html
├─ koa-mock------------------------------------------基于koa实现的本地mock项目
│ ├─ api------------------------------------------将接口返回的json放在此目录,接口即为api/文件名
├─ package.json
├─ src-----------------------------------------------项目资源目录
│ ├─ App.vue--------------------------------------uni的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件
│ ├─ api------------------------------------------API文件,用于集中管理接口
│ ├─ http-----------------------------------------axios拦截器,用于自定义请求和响应拦截
│ ├─ main.ts--------------------------------------入口文件,主要作用是初始化vue实例、定义全局组件
│ ├─ manifest.json--------------------------------应用的配置文件,用于指定应用的名称、图标、权限等
│ ├─ model----------------------------------------API接口用到的typescript模型,集中管理
│ ├─ pages----------------------------------------业务页面
│ ├─ pages.json-----------------------------------页面全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
│ ├─ router---------------------------------------路由配置,导航守卫
│ ├─ static---------------------------------------资源文件,图片等
│ ├─ store----------------------------------------pinia配置,持久化存储
│ │ ├─ index.ts
│ │ └─ persist.ts------------------------------持久化插件
│ ├─ types.d.ts-----------------------------------typescript的声明文件
│ ├─ uni.scss-------------------------------------全局scss变量,无需引入可以直接使用
│ └─ uni_modules----------------------------------uni-app插件
│ ├─ fant-mini-plus------------------------一款vue3组件库
│ └─ mp-html-------------------------------富文本插件
├─ tsconfig.json-------------------------------------TypeScript 编译器的配置文件
├─ versionrc.js--------------------------------------standard-version的配置文件
├─ vite.config.ts------------------------------------用于配置 vite 的编译选项
└─ yarn.lock-----------------------------------------Yarn生成的锁文件,它用于记录在使用Yarn安装包时确切的依赖关系和版本号
插件市场会将类似
.eslintrc.js
这种以.
开头的文件忽略掉,故我将.
改成了_
上传。如果直接在插件市场下载,需要手动将_
改为.
,涉及文件及目录包含_husky
、_vscode
、_env.development
、_env.production
、_eslintignore
、_eslintrc.js
、_git-cz.json
、_gitignore
、_prettierrc
。或者到gitee上clone
或fork
- 安装依赖
- 安装前端项目依赖:
yarn
- 安装mock项目依赖:
yarn mock:install
- 安装前端项目依赖:
- 运行
- 运行前端项目:
yarn dev:h5
(其他平台命令在uni-app官网或者package.json中查看) - 运行mock项目:
yarn mock:dev
- 运行前端项目:
- 提交代码
- 暂存准备提交的代码(举例添加当前目录下的所有文件到暂存区):
git add .
- 提交:
yarn commit
,输入之后回车,我们可以选择提交类型。
- 暂存准备提交的代码(举例添加当前目录下的所有文件到暂存区):
- 发布版本(此处操作会使package.json中的version变更,可以此为版本号对显示)
- 大版本升级1.0.0->2.0.0:
yarn release-major
- 中版本升级1.0.0->1.1.0:
yarn release-minor
- 小版本升级(一般是补丁)1.0.0->1.0.1:
yarn release-patch
- 注意:
执行完发布版本的命令之后需要将执行终端中打印的命令将生成的tag推送到git。此操作完成之后会自动生成版本发布日志,可以用于对外发布
- 大版本升级1.0.0->2.0.0:
-
使用typescript开发可以提高前后端交互的效率,提升前端项目的健壮性。在开发过程中需要做到尽量减少使用any。 小程序样式变量统一定义在uni.scss中,作为规范,若设计稿上使用的颜色存在于uni.scss中,则使用uni.scss中的变量,如不存在则需要沟通是否新增变量。
-
提交代码时,feat和fix类型的提交尽量将任务单号作为前缀方便追踪改动关联的需求,如:feat: TASK-1000 新增某个功能。
-
css原子化,如果有需要可以自行引入UnoCSS,本项目暂时不会使用。
yarn
或者
npm install
yarn mock:install
或者
npm run mock:install
# 运行到h5
yarn dev:h5
yarn mock:dev
yarn lint
git add .
yarn commit
# 大版本
yarn release-major
# 中版本
yarn release-minor
# 小版本
yarn release-patch
# 上传到微信小程序
yarn upload:mp-weixin
# 上传到支付宝小程序
yarn upload:mp-alipay
# 上传到钉钉小程序
yarn upload:mp-dingtalk
有不明白或者建议可以扫码交流