初始化客户端代码
我们现在来创建一下项目。
创建 uni-best 项目
最新版本的 uni-best 可以通过下面的命令来快速生成。
执行创建命令
我们复制一下前面的部分,然后在终端去粘贴,然后最后呢输入我们项目的名称。
比如我们就叫 account-client,然后回车。
pnpm create uni-best account-client选择开发平台
回车之后呢,这里需要我们去选择一下平台。
我们做的是移动端的开发,主要呢就是一个 APP 和微信小程序。然后这里呢我们把 H5 也选择一下,方便我们后面去做调试。
操作提示:
- 按住键盘上的上下键去移动光标
- 然后按空格键去选择和取消选择
- 选择好之后呢,按回车
选择的平台:
- ✅ APP
- ✅ 微信小程序
- ✅ H5
选择 UI 库
然后我们还要选择一下 UI 库。每个 UI 库呢都有自己的风格,这里呢我们选择这个 Wot Design UI。
如果你喜欢其他风格的 UI,也可以在这里切换。
然后回车。
配置其他选项
之后呢,我们还要选择一下是否需要登录策略,选择默认的 No,回车。
是否需要多语言?也不需要,然后默认是 No,回车。
安装项目依赖
查看生成的项目
现在我们看到项目的根目录下面,有了这个 account-client 目录。
打开看一下,项目的代码呢就已经生成好了。
进入项目目录
然后我们执行 pnpm install 下载一下依赖包。
注意: 这里报错了,我们需要先进入到这个目录下面。
进入到 client 目录下面,然后再执行:
cd account-client
pnpm install输入 y 确认一下。
依赖安装完成
现在已经安装好了依赖。
启动开发服务器
查看可用命令
我们打开这个 package.json,然后找到下面的调试部分。
调试呢我们就暂时用 H5 来调试一下,我们需要执行这个命令:
pnpm dev:h5启动项目
在终端输入命令,然后回车:
pnpm dev:h5现在客户端的代码就已经运行起来了。
它的端口是默认的 9000
在浏览器中访问
复制一下地址,把它放到浏览器中:
http://localhost:9000我们看到,客户端的代码已经正常在运行了。
切换到移动端模式
然后按住键盘上的 F12,打开开发者工具。
点击这个图标,切换成手机模式去访问。
项目启动成功!
客户端项目已经成功创建并运行,可以开始进行开发了。
项目结构说明
创建完成后,项目的基本结构如下:
account-client/
├── src/ # 源代码目录
├── pages/ # 页面文件
├── components/ # 组件目录
├── static/ # 静态资源
├── package.json # 项目配置
└── ...常用开发命令
| 命令 | 说明 |
|---|---|
pnpm dev:h5 | 启动 H5 开发服务器 |
pnpm dev:mp-weixin | 启动微信小程序开发 |
pnpm dev:app | 启动 APP 开发 |
pnpm build:h5 | 构建 H5 生产版本 |
pnpm build:mp-weixin | 构建微信小程序 |
遇到问题?
如果在项目初始化或启动过程中遇到问题,可以扫描下方的微信二维码帮您看下(免费咨询)
下一步
客户端项目初始化完成后,接下来我们需要:

