【unibest文档】二、快速开始

大家好,我是 菲鸽,今天带给大家 unibest 文档系列文章第2篇 ------ 快速开始篇。欢迎食用~

unibest - 官方文档地址codercup.github.io/unibest-doc...

快速开始

  • 前置依赖

    • Node.js - >=v18
    • pnpm - >=7.30(推荐使用 8.12+
    • 文本编辑器 - 推荐使用 VSCode,可选 WebStrom
    • 辅助运行工具 - HBuilderX,运行 APP 还是离不开 HBuilderX

创建项目

通过下面的命令可以快速生成项目模板,pnpm create unibest <项目名称> ,如果不写 <项目名称> 会进入命令行交互模式。

bash 复制代码
pnpm create unibest my-project

如果使用 npm,可能有缓存,需要加上 @latest 标识,如果创建失败,请使用 pnpm 安装。

bash 复制代码
npm create unibest my-project
# 如果提示报错,或者生成的项目版本太旧,请使用下面的命令,增加 @latest 标识
npm create unibest@latest my-project

实际操作截图如下:

强烈推荐是用 pnpm,性能更好,速度更快,节省磁盘空间。

如果没有 pnpm 可以通过 npm i -g pnpm 安装。

create unibest 支持 -t 参数选择模板,目前已有两大类 8 个模板

  • 普通 模板( 6个 ):分别是 basedemouchartstabbari18njs
  • hbx 模板( 2个 ):分别是 hbx-basehbx-demo

不带 -t 参数时会默认生成 base 模板。

base 模板是最基本的模板,更新最及时,推荐使用 base 模板创建新项目。其他几个模板也是基于 base 模板得到的。 demo 模板则作为参考用。

js 模板不推荐使用,可以使用 base 模板替代,里面已经做了兼容配置,可以直接编写 js,原本的 ts 文件还能提供部分类型,何乐而不为?

sh 复制代码
# VS Code 模板
pnpm create unibest my-project # 默认用 base 模板
pnpm create unibest my-project -t base # 基础模板
pnpm create unibest my-project -t demo # 所有demo的模板(包括i18n)
pnpm create unibest my-project -t ucharts # 秋云图表模板
pnpm create unibest my-project -t tabbar # 自定义 tabbar 模板
pnpm create unibest my-project -t i18n # 多语言模板
pnpm create unibest my-project -t js # js 模板

# HBuilderX 模板,方便使用 uniCloud 云开发 (未来可以对接 uni-app x)
pnpm create unibest my-project -t hbx-base # hbx的base模板
pnpm create unibest my-project -t hbx-demo # hbx的demo模板,包含所有的demo

至于 uni-app x 模板,紧盯 uni-app 官方动向,等官方出来脚手架,unibest 将第一时间推出该模板。

安装、运行

bash 复制代码
pnpm i
pnpm dev
# dev默认运行的是h5,其他平台执行dev:<uni-platform>,如:
pnpm dev:mp-weixin

pnpm dev 之后在浏览器打开 http://localhost:9000/

其他平台构建和发布,查看第十一章节:《十一、运行发布篇》。

第一次 commit

bash 复制代码
git add .
git commit -m "feat: init project"

v3 代码块

vue 文件中,输入 v3tab 即可快速生成页面模板,可以大大加快页面生成。

原理:基于 VSCode 代码块生成。

全文完~

相关推荐
2501_9160074711 小时前
iOS逆向工程:详细解析ptrace反调试机制的破解方法与实战步骤
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张12 小时前
前端可视化大屏制作全指南:需求分析、技术选型与性能优化
前端·ios·性能优化·小程序·uni-app·iphone·需求分析
编程迪13 小时前
基于Java和uniapp开发的名片交换分享系统企业名片管理软件个人电子名片小程序源码
java·uni-app·电子名片·名片小程序·名片软件源码
2501_915921431 天前
苹果iOS应用开发上架与推广完整教程
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
HTTP和HTTPS协议工作原理及安全性全面解析
android·ios·小程序·https·uni-app·iphone·webview
笨笨狗吞噬者1 天前
小程序包体积分析利器 -- vite-plugin-component-insight
前端·微信小程序·uni-app
中国胖子风清扬2 天前
基于GPUI框架构建现代化待办事项应用:从架构设计到业务落地
java·spring boot·macos·小程序·rust·uni-app·web app
久爱@勿忘2 天前
uniapp自定义进度条(vue或原生开发修改html标签即可)
uni-app
「、皓子~2 天前
海狸IM技术升级:从Uniapp到Flutter的跨平台重构之路
flutter·重构·golang·uni-app·im·社交软件
大阳光男孩2 天前
Uniapp+Vue3树形选择器
前端·javascript·uni-app