第四章:AI 实战开发4. 初始化客户端代码

初始化客户端代码

我们现在来创建一下项目。

创建 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构建微信小程序
💡

遇到问题?

如果在项目初始化或启动过程中遇到问题,可以扫描下方的微信二维码帮您看下(免费咨询)

下一步

客户端项目初始化完成后,接下来我们需要:

👉 下一节:初始化服务端代码


相关信息

💬 扫码了解更多信息

客服微信二维码

添加微信

知识星球二维码

加入知识星球