简介
本模版推荐使用 VSCode 编辑器开发,集成了 Prettier + ESLint+ StyleLint + husky + lint-staged + commitlint + UnoCSS + Vue3 + TypeScript + Vite4 + setup,开箱即用。
项目地址
github: fly-vue3-templates/vue3-uniapp-template
gitee: fly-vue3-templates/vue3-uniapp-template
如果觉得不错,记得给github、gitee 加star,文章点赞~~
特性
- ⚡️ Vue 3, Vite, pnpm, esbuild - 就是快!
- 组件自动化加载
- pinia+适用于多端的持久化方案
- UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
- UnoCSS Icons, 海量图标-https://icones.js.org/
- 使用 新的 <script setup> 语法
- API 自动加载 - 直接使用 Composition API 无需引入
- TypeScript & ESLint & stylelint - 保证代码质量
- husky & lint-staged + commitlint - 保证代码提交质量
- ES6 import 顺序自动排序,css 属性自动排序,增强编码一致性
- 使用请求拦截器,封装好您的请求
- 图片自动压缩,再也不用去tinyPng等网站压缩图片了
- 多环境配置分开,想则怎么配置就怎么配置
业务功能 TODO LIST
- 页面下拉刷新
- 导航栏返回or去首页
- 导航栏渐变(微信+h5)
- 自定义导航栏顶部机型适配
- 微信小程序分享(好友+朋友圈)
- 微信登录
- 仿BOSS直聘-个人中心
- 仿华为商城-个人中心
- 页面悬浮球(floating bubble)
- 多tab列表功能
- 抽奖转盘
- 仿网易云音乐APP(独立项目)
欢迎有心的人一起实现。
环境
拉取代码
- git 拉取
- github:git clone https://github.com/fly-vue3-templates/vue3-uniapp-template fly-uniapp
- gitee:git clone https://gitee.com/fly-vue3-templates/vue3-uniapp-template.git fly-uniapp
- degit 拉取(不包含git,需要自己git init)
- npx degit https://github.com/fly-vue3-templates/vue3-uniapp-template fly-uniapp
npx degit https://gitee.com/fly-vue3-templates/vue3-uniapp-template fly-uniapp (degit 不支持 gitee)- github template
运行
- web平台: pnpm dev:h5, 然后打开 http://localhost:9000/。
- weixin平台:pnpm dev:mp-weixin 然后打开微信开发者工具,导入本地文件夹,选择本项目的dist/dev/mp-weixin 文件。
- APP平台:pnpm dev:app, 然后打开 HBuilderX,导入刚刚生成的dist/dev/app 文件夹,选择运行到模拟器,或者运行的安卓/ios基座。
发布
- web平台: pnpm build:h5,打包后的文件在 dist/build/h5,可以放到web服务器,如nginx运行。如果最终不是放在根目录,可以在 vite.config.ts 的 base 属性进行配置。vite官网
- weixin平台:pnpm build:h5, 打包后的文件在 dist/build/mp-weixin,然后通过微信开发者工具导入,并点击右上角的“上传”按钮进行上传。
- APP平台:pnpm build:app, 然后打开 HBuilderX,导入刚刚生成的dist/build/app 文件夹,选择发行 - APP云打包。
作者:菲鸽
链接:
https://juejin.cn/post/7321930742400188453