【2024】uniapp+vue3超实用模板(终)

【2024】uniapp+vue3+ts超实用模板(终)

系列文章

简介

本模版推荐使用 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

特性

业务功能 TODO LIST

  • 页面下拉刷新
  • 导航栏返回or去首页
  • 导航栏渐变(微信+h5)
  • 自定义导航栏顶部机型适配
  • 微信小程序分享(好友+朋友圈)
  • 页面悬浮球(floating bubble)
  • 多tab列表功能
  • 抽奖转盘

环境

  • pnpm>=8.12
  • node>=18

拉取代码

  • 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

  • github template

运行

  • web平台: pnpm dev:h5, 然后打开 http://localhost:9000/
  • weixin平台:pnpm dev:mp-weixin 然后打开微信开发者工具,导入本地文件夹,选择本项目的dist/dev/mp-weixin 文件。

发布

  • web平台: pnpm build:h5,打包后的文件在 dist/build/h5,可以放到web服务器,如nginx运行。如果最终不是放在根目录,可以在 vite.config.tsbase 属性进行配置。vite官网

  • weixin平台:pnpm build:h5, 打包后的文件在 dist/build/mp-weixin,然后通过微信开发者工具导入,并点击右上角的"上传"按钮进行上传。

文件整理

可以把不要的文件统统删除,或者留着当做参考。

相关推荐
行板Andante2 分钟前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam34 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8501 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞3 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js