Skip to content

2-快速开始

目标

如果你是为了学习前端工程化,那么你可以根据,指南顺序依次学习,每一章都有一个预开始项目

可以自己下载下来,然后根据文章进行学习,要是遇到什么不懂的问题可以去掘金私信我,也可以加下交流群交流

我在掘金上也同步了,这些文章,你可以看看对应文章中的评论区有没有你想要的答案

当然啦,如果你不想学,想拿来用就用,也是可以的,可以通过脚手架,直接构建就可以啦~

也可以通过 github、gitee 进行下载

使用

1. 脚手架创建项目

使用 pnpm 使用脚手架快速生成项目模板,pnpm create uni-plus -n <项目名>

如果你不使用 -n <项目名> ,会进入命令行交互模式,输入文件名

shell
pnpm create uni-plus -n uni-plus
# 或者
npx create-uni-plus -n uni-plus
npm create uni-plus -n uni-plus

【注意】如果无法创建项目,可以是有缓存,可以加上 @latest

shell
pnpm create uni-plus@latest -n uni-plus

我们来实际跑一下

image-20250126110944431

2. 入门

该项目有两个模板,一个是 base 模板,一个是 demo 模板

demo 模板是基于 base 模板进行扩展的

想快速入门的话,可以下载 demo 模板,然后使用查看文档教程

大概看一遍就能大致理解,模板的大致结构与组成了

3. 使用模板项目

到底该如何使用这个模板呢?

我认为说的再多,也不如实际使用项目模板,做一个项目实战入门快

大家可以看 项目实战篇,亲手做一个项目

后续我会在 b站更新 项目实战篇 的视频

4. commit

commit 的话,为了规范提交流程,不使用直接提交方式

采用 cz 提交,运行下面的命令,就会有提示,按提示走就行

shell
git add .
pnpm cz
git push origin dev

具体,实现方式和提交细节,可以看 Git提交篇

动画

5. Log 与 Tag 生成

shell
pnpm release

直接输入上面命令,就会让你选择,你想要 tag 类型,有下面三种

patch 小版本 0.0.1 -> 0.0.2

minor 中版本 0.0.1 -> 0.1.0

major 大版本 0.0.1 -> 1.0.0

push 选择 Yes 之后,就会自动上传 CHANGELOG.md 并且帮我们打好 tag

image-20250211213617817

image-20250211214051013

image-20250211214105581

6. Vscode Snippets

.vue 文件中,输入 v3Enter 就可以快速生成页面模板

具体实现原理可以看 Snippets

动画

DEMO 学习

为了让同学们能更快的上手这个框架

也是准备丰富的案例供学习参考~

需下载两个项目

  • uni-plus-demo 提供案例学习
  • uni-plus-mockdemo 请求部分,提供 mock 数据

image-20250212142312683

Released under the MIT License.