create-uni v2 或许是当前最好用的uni-app CLI工具

1,164 阅读6分钟

如果你曾尝试使用cli 脚手架创建uni-app项目,你大概率会在官网看见这样的信息

image.png

使用官网的方式拉取工程项目,会遇到一些问题

  1. degit命令只支持Github,如果你的网络不稳定可能会无法顺利拉取到项目
  2. 使用gitee从网站上下载模板,需要登录账号
  3. dcloud团队并没有对这个模板积极维护,即使成功下载到本地,项目版本也非常落后
  4. 项目配置非常基础,并不能满足现代工程化项目的需求

为了解决上述问题create-uni诞生了,create-uni算不上一个新项目,第一次提交是在2023年的6月27日。也有1年半的时间了,在这段时间里,共计500多次提交,发布89个版本;共计获得了109个stars,如果把提交的次数和获取到的stars看作投资回报比的话,在这一年半的时间里,虽然不能说是一帆风顺吧,也可以说是依托答辩

📖 介绍

create-uni作为一款轻量脚手架工具,在快速搭建 uni-app 项目方面表现卓越。它能助力开发者迅速构建起基于前沿技术 vitevue3uni-app 项目,为项目启动按下“加速键”。不仅如此,考虑到不同开发者的需求各异,create-uni贴心地准备了多样化的项目模板以供挑选,无论是追求简洁高效的基础模板,还是适配特定业务场景的特色模板,都能在这里找到,让开发者得以根据自身实际情况灵活抉择,轻松开启个性化的 uni-app 开发之旅。

🚤 快速使用

pnpm create uni

如果顺利的话,你可以看到这样的界面,帮助你创建你的uni-app项目。

如果没有,那就是坏了,欢迎反馈

image.png

📃 模板列表
模板名描述参数名
vitesse-uni-app由 Vite & uni-app 驱动的跨端快速启动模板vitesse
wot-demo基于 vitesse-uni-app 的 wot-design-uni 快速起手demowot-demo
wot-starter-retail基于Wot Design Uni的uni-app零售行业模板wot-starter-retail
unisave拥抱 web 开发,拯救 uniapp。适配所有(app、mp、web)平台unisave
🏗️ 插件列表
插件名描述参数名
vite-plugin-uni-components按需自动引入组件import
vite-plugin-uni-pages提供基于文件系统的路由pages
vite-plugin-uni-layouts提供类 nuxt 的 layouts 系统layouts
vite-plugin-uni-manifest自动生成 manifest.json 文件manifest
vite-plugin-uni-platform基于文件名 (.<h5|mp-weixin|app>.) 的按平台编译插件filePlatform
vite-plugin-uni-platform-modifier为属性、指令提供平台修饰符并按需编译platformModifier
vite-plugin-uni-middleware使用路由中间件middleware
uni-ku-root模拟虚拟根组件(支持SFC的App.vue)root
📦 模块列表
模块名描述参数名
pinia符合直觉的 Vue.js 状态管理库pinia
unocss即时按需的原子级 CSS 引擎unocss
uni-network为 uni-app 打造的基于 Promise 的网络请求库uniNetwork
uni-useuni-app 组合式工具集uniUse
uni-promises为 uni-app 提供的 Promise 包装器uniPromises
🧩 组件库
组件名描述参数名
Uni UIUniApp官方组件库uni
wot-design-uni高颜值、轻量化的uni-app组件库wot
nutui-uniapp京东风格的轻量级移动端组件库nut
uv-ui多平台快速开发的UI框架uv
Ano UI轻量级、漂亮、快速的 UnoCSS 组件库ano

值得一提的是,目前所使用的大部分插件和工具都源自uni-helper团队,他们为项目的丰富与完善付出了诸多努力,提供了强有力的技术支撑。

与此同时,create-uni项目秉持开放包容的态度,诚挚欢迎广大开发者积极参与其中。无论是精心打造的模板,功能独特的插件,实用便捷的工具,还是完备高效的组件库,都可以向create-uni提交。我们相信,通过汇聚各方智慧与力量,能够让create-uni不断进化,更好地服务于每一位使用者,携手共创更加出色的开发体验。

和V1比较

相较于 create-uni V1 版本高达 346 kB 的体积,V2 版本精简至仅 167 kB,近乎缩减了一半,这极大地优化了项目表现,不仅显著缩减了项目体积,还大幅提升了响应速度。

体积得以成功缩减一半,主要归因于两个关键举措:

其一,把原来的 prompts 替换成了 @clack/prompts。新引入的 @clack/prompts 风格更加现代化,还额外具备摇树优化(Tree Shaking)功能,能有效剔除无用代码,使得代码包更加精简;

其二,对非核心的 create-uni 功能进行了剥离处理,将其单独封装成包,如 @create-uni/info。通过这种方式,避免了主包的臃肿,让主包专注于核心功能的实现,进而在整体上实现了体积的大幅优化。

@create-uni/info

🚤 快速使用
pnpm create uni --info

独立版本

pnpx @create-uni/info
📖 介绍

image.png 快速检测你的uni-app项目,报告项目的环境和依赖信息,主要用于uni-helper项目的issues里提供详细的信息。

这属于一项颇为重要的功能,不过并非不可或缺。鉴于此,在 create-uni V2 版本里,它会从主包中被移除,提供独立版本,同时还设置了从主包进行快捷调用的参数,以此兼顾不同的使用场景与需求。

如下图,当传递--info参数时,会再执行调用命令

graph LR
create-uni -->|"--info"| npx["npx @create-uni/info"]

One more thing

诚然,CLI 工具为我们创建项目带来了极大便捷,但大家在使用时,是否也碰到过一些问题呢?

  1. 终端显示信息有限,CLI 作者提供的选项,单从名字很难知晓其功能。
  2. 常规 CLI 工具呈线性流程,只有选对第一步才能进行下一步,一旦输入有误,就得从头再来。
  3. 设定安装目录较复杂,在终端输入文件目录既繁琐又易出错,所以 CLI 工具大多默认安装到当前目录。

或许create-uni可以提供一种全新的交互方式?

CLI NOT ONLY CLI

create-uni目前正在积极地探索一种完全崭新的CLIGUI相结合的模式。这种模式的探索旨在为用户带来更加高效、便捷且直观的使用体验。

通过将命令行界面(CLI)的强大功能与图形用户界面(GUI)的友好交互性相融合,create-uni期望能够满足不同用户群体的需求,无论是喜欢通过命令行快速操作的开发者,还是更倾向于直观图形界面的用户。

🚤 快速使用
pnpm create uni --gui

用户输入 “pnpm create uni --gui”,简洁美观的图形起始页随即呈现,图标与选项清晰,引导用户轻松配置项目,像选定项目模版、文件位置、插件等关键步骤,点点鼠标就能搞定。

最后

create-uni是一个免费的开源软件,遵循MIT协议,社区的赞助使其能够有更好的发展。

你的赞助会帮助我更好的维护create-uni,如果对你有帮助,请考虑赞助一下😊

你的star🌟也是对我的很大鼓励,Github

欢迎反馈问题和提pr共建

🙏感谢以下项目,让create-uni使其成为可能