🎉🎉🎉2024年末重磅推出更懂你的uni-app框架!!!

🌿 前言

在去年写了一篇关于【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】的文章,反馈还不错,所以一直想抽个时间把这个弄成框架模版开源出来!后面断断续续的开发,今天终于发布了第一个版本🎉🎉🎉,欢迎体验~

🌴 介绍

snail-uni - 专为开发者打造的 Uni-App 框架模板。 基于 UniApp + Vue3 + TypeScript + Vite + Wot Design Uni 的高效框架模板。它内置了 Snail-Uni 脚手架工具,帮助您快速创建 TypeScriptJavaScript 版本项目。Snail-Uni 配备了丰富的开箱即用配置,让您从一开始就拥有高效的开发体验。

💻 特性

  • 使用 Vue3 + Vite5 + Ts 等最新技术栈构建
  • 采用 pnpm + Monorepo 模式构建
  • 路由自动注册,无需手动配置路由,同时集成了Uni Mini Router路由插件系统
  • 集成 Oxlint + Eslint 最新的代码规范,更高效的检测代码质量
  • 宇宙最强编辑器Vscode,告别HBuilderX
  • 支持uni-appvue3piniauni mini router自动导入
  • 支持微信云开发(后续更新)

✍️ 前置准备

  • Node.js 18 及以上版本
  • pnpm - >=8.15.6(推荐使用 9.0.0
  • VSCode 开发工具下载
  • HBuilderX - APP 的运行和发布需要
  • Git 安装

Snail-uni 要求 Node.js 版本 18+ 或者 20+. 请注意升级你的 Node.js 版本!否则会导致项目无法正常运行!

🌿 使用

snail-uni 附带一个命令行创建向导,可以帮助你构建一个基本项目。支持创建 jsts 让你无需纠结。

bash 复制代码
# npm
npm create snail-uni
# pnpm
npm create snail-uni
# yarn
yarn create snail-uni
# bun
bun create snail-uni

将需要回答几个简单的问题:

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板, 例如: 不指定类型默认为 js 版本且其他都默认关闭!支持两种创建语法:

🌱 方式一

npm create snail-uni <project-name> --t <template-name 模板名称> --ui <ui库(Wot-Design/Uv-ui/Uview-plus/TuniaoUI> --lint <yes/no)>

sh 复制代码
# npm
npm create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
#pnpm
pnpm create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
#yarn
yarn create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
#bun
bun create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
  • 支持以下模板:uni-tsuni-tabbar-tsuni-jsuni-tabbar-js
  • 支持以下ui库:Wot-DesignUv-uiUview-plusTuniaoUI

🌱 方式二

npm create snail-uni <project-name> <语言类型(js/ts)> <是否使用(tabbar/no)> <是否使用代码检查(eslint/no)> <ui库(Wot-Design/Uv-ui/Uview-plus/TuniaoUI)>

sh 复制代码
#npm 
npm create snail-uni snail-uni-app ts tabbar eslint
#pnpm
pnpm create snail-uni snail-uni-app ts tabbar eslint
#yarn
yarn create snail-uni snail-uni-app ts tabbar eslint
#bun
bun create snail-uni snail-uni-app ts tabbar eslint

执行完之后,将生成一个uni-app的项目,使用vscode开发工具打开

💻 启动并运行

snail-uni 启动运行脚本在package.json中配置:

json 复制代码
{
  ...
  "scripts": {
    "dev": "uni -p mp-weixin",
    "dev:h5": "uni",
    "build": "uni build -p mp-weixin",
    "build:h5": "uni build"
    ...
  },
  ...
}

dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它:

默认启动微信小程序,根据自己需求在package.json 中进行调整

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106322 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)4 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体