---
title: "SHOPLINE CLI 如何构建应用"
doc_type: static
doc_category: static
doc_version: v20270301
source_url:
html: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/build-apps-using-shopline-cli'
md: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/build-apps-using-shopline-cli.md'
---
# SHOPLINE CLI 如何构建应用
SHOPLINE CLI 是专为 SHOPLINE 开发者服务的命令行界面工具，涵盖项目初始化、本地开发、项目部署等完整开发链路，提供一体化的项目开发服务，包含且不限于本地应用配置、关联开发商店本地项目预览和调试应用程序等能力，从而更好地提高开发者工作效率。
## 创建应用
### 环境安装
在你开始构建第一个 SHOPLINE 应用程序之前，请确保你的开发环境已经设置完毕，以能够顺利创建应用。
#### 要求
> 1. 已经创建[合作伙伴](https://developer.shopline.com/zh-hans-cn/docs/apps/get-started/onboarding-guidelines-for-shopline-developer-s.md?_highlight=%E5%90%88%E4%BD%9C%E4%BC%99%E4%BC%B4)账户，以及创建了对应的[开发商店](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/development-stores/overview.md)
> 2. 已经下载 Node.js 并且版本等于或大于18.0
> 3. 已经下载过包管理器：如 npm
> 4. 已经下载过 Git 版本控制工具
> 5. 确保已经下载了浏览器，建议使用最新版本的 Chrome 浏览器
### 初始化应用
在初始化你的应用程序时，你可以选择常见的包管理工具，使用 npm, yarn, 或 pnpm 中的一个。按照以下步骤操作：
1. 切换到你要安装应用程序的目录。
2. 运行以下命令，以初始化应用程序。
3. 输入你的应用项目名称如：Shopline App 会被转换为 shopline-app
```bash
npm create @shoplinedev/app@next
```
> **tip**
>
> 由于初始化项目需要下载对应的项目依赖，因此耗时将会较久，请你耐心等待。
> 项目初始化成功后，会在应用开发的目录中生成标准 [应用框架](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/app-structure.md?lang=zh-hans-cn)，请按照框架进行开发。
> 如果你想迅速初始化项目，你可以通过`--skip-dependencies-installation`来跳过下载依赖包的步骤，直接初始化应用模版，但你后续需要自行执行下载依赖包的操作。
### 启动服务
现在，你可以通过以下步骤来启动你的应用程序本地服务。请注意，本地服务由SHOPLINE CLI 通过 cloudflared 代理，以便在开发商店中进行调试和预览你的应用程序。
- 切换到对应的应用程序目录
```bash
cd shopline-app
```
- 执行本地启动命令
```bash
npm run dev
```
一旦你执行了上述命令，SHOPLINE CLI 将会引导你完成以下步骤：
- 跳转至登录界面，并登录你的开发者账户。
- 选择相应的合作伙伴（partner）账户。
- 从合作伙伴账户中选择你想要操作的应用。
- 如果在当前合作伙伴账户下没有找到相关的应用，SHOPLINE CLI 将引导你创建一个新的应用。
- 选择目标开发商店，确保与你的应用程序关联。
> **warning**
>
> 如果你的应用已经上架到 SHOPLINE 应用中心，本地启动该应用服务会失败。这是因为 SHOPLINE CLI 禁止开发者在生产状态下更新应用，以防止对生产环境造成影响。
> 建议你通过 `dev --reset` 命令对应用本地缓存数据进行重置，以切换到其它应用进行本地开发。
### 安装应用
完成上述步骤后，SHOPLINE CLI 将生成对应的应用程序预览链接，并引导你前往相应的开发商店安装当前应用程序。请注意：如果当前开发商店已经安装过此应用，则将跳过安装步骤，直接预览你的应用。
点击（如果你的命令行支持）或者复制生成的预览链接，以安装并预览你的应用。
**安装应用程序界面**
**点击授权并安装**
**创建一个商品来检验当前应用是否可以正常调用 SHOPLINE 应用模版集成的相关 SDK 功能。**
至此，你的 SHOPLINE 应用程序已成功创建并安装完成。现在，你可以基于当前环境继续进行本地开发。祝你开发顺利！
## SHOPLINE CLI命令
### 命令预览
通过如上步骤你可以成功创建并启动一个应用服务，你还可以自行选择 SHOPLINE CLI 提供的如下其它命令进行应用相关步骤开发。
| 主题 | 命令 | 描述 |
| --- | --- | --- |
| app | dev | 启动应用程序相关服务 |
| ^ | build | 构建打包应用程序相关资源 |
| ^ | config | 使用应用程序相关配置信息 |
### dev
`dev`命令用于启动应用程序的本地服务，包括前端和后端服务。执行此命令后，将启动服务并生成可用于本地预览应用程序的链接。
`dev`命令启动后会执行默认以下操作：
- 通过`cloudflared`代理本地服务地址并生成`tunnel-url`。
- 更新远端应用程序的应用地址、应用回调地址等信息。
- 同步更新本地的`toml`配置文件。
| 命令 | 参数 | 描述 |
| --- | --- | --- |
| dev | --reset | 重置当前应用的缓存配置，重新选择合作伙伴、应用信息和开发商店。 |
| ^ | --skip-dependencies-installation | 跳过安装应用程序依赖包，如果选择跳过安装依赖包，后续需手动运行相应的安装命令，如 `npm install`。 |
**命令示例**
```bash
npm run dev
```
### config
`config` 命令用于更新本地应用配置、远端应用配置，并切换本地需要使用的配置。当你执行该命令时，会在本地生成一些对应的 toml 文件。例如，当你使用`link` 命令将本地应用与远端应用关联时，会生成相应的 `shopline.app.{appName}.toml` 文件。
| 命令 | 参数 | 描述 |
| --- | --- | --- |
| config | **link** | 获取合作伙伴后台的应用列表，链接目标应用，并生成相应的配置文件。 |
| ^ | **push** | 将本地的 toml 配置推送到远端服务。 |
| ^ | **use** | 选择当前需要使用的 toml 配置文件。 |
**命令示例**
```bash
shopline app config use
# 会列出本地多个toml配置文件供你选择
# ·shopline.app.a.toml
# ·shopline.app.b.toml
# ·shopline.app.c.toml
# ·shopline.app.d.toml
```
> **提示**
>
> 如果你本地已经存在`shopline.app.example.toml`配置文件，当你使用`link`命令连接到 **example** 应用时，**SHOPLINE CLI** 会直接覆盖你当前的`shopline.app.example.toml`配置文件，而不是重新生成一份配置文件。
> **提示**
>
> 在执行 push/link/use 操作时，如果遇到当前合作伙伴账户无权限的情况，请考虑切换至当前应用配置信息对应合作伙伴账户进行操作。
### build
`build`命令用于同时构建当前应用程序的相关资源。执行该命令将同时进行前端和后端的构建打包操作，并在相应的目录中生成 **dist** 目录，用于存放构建后的静态资源。
**命令示例**
```bash
npm run build
```