2022-07-01 16:47:25 +08:00
|
|
|
---
|
|
|
|
title: 快速开始
|
|
|
|
order: 2
|
|
|
|
---
|
|
|
|
|
2023-02-08 18:57:16 +08:00
|
|
|
> 需要保证已安装 [Node.js](https://nodejs.org),并确保 Node 版本是 14 或以上。详见 [开发环境](./basic/development.md)。
|
2022-07-07 18:56:14 +08:00
|
|
|
|
2022-07-01 16:47:25 +08:00
|
|
|
## 创建应用
|
|
|
|
|
|
|
|
在终端执行以下命令:
|
|
|
|
|
|
|
|
```bash
|
2022-11-17 14:30:45 +08:00
|
|
|
$ npm create ice ice-app
|
|
|
|
```
|
|
|
|
|
|
|
|
然后按照提示操作即可!
|
|
|
|
|
|
|
|
或者你通过附加的命令行选项指定使用的模板:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
$ npm create ice ice-app --template @ice/lite-scaffold
|
2022-07-01 16:47:25 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
看到如下信息说明项目创建成功:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
✔ download npm tarball successfully.
|
|
|
|
info clean package.json...
|
|
|
|
Initialize project successfully.
|
|
|
|
Starts the development server.
|
|
|
|
|
|
|
|
cd ice-app
|
|
|
|
npm install
|
|
|
|
npm start
|
|
|
|
```
|
|
|
|
|
|
|
|
## 本地调试
|
|
|
|
|
|
|
|
首先需要安装项目依赖:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# 进入项目目录
|
|
|
|
$ cd ice-app
|
|
|
|
# 安装依赖
|
|
|
|
$ npm install
|
|
|
|
```
|
|
|
|
|
|
|
|
安装依赖完成以后,执行以下命令以启动调试:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# 启动调试
|
|
|
|
$ npm start
|
|
|
|
```
|
|
|
|
|
2022-07-07 19:52:13 +08:00
|
|
|
此时会自动打开浏览器窗口并访问 <http://localhost:3000>,这时会看到默认页面。
|
2022-07-01 16:47:25 +08:00
|
|
|
|
2022-07-07 19:52:13 +08:00
|
|
|

|
2022-07-01 16:47:25 +08:00
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
## 部署发布
|
|
|
|
|
|
|
|
执行以下命令以构建生产环境产物:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# 构建
|
|
|
|
$ npm build
|
|
|
|
```
|
|
|
|
|
|
|
|
产物默认生成到 `build` 目录下:
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
./build
|
|
|
|
├── css
|
|
|
|
| └── index.css
|
|
|
|
├── index.html
|
|
|
|
└── js
|
|
|
|
├── framework.js
|
|
|
|
├── index.js
|
|
|
|
└── main.js
|
|
|
|
```
|
2022-11-15 15:03:30 +08:00
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
这时你可以把 `build` 目录部署到服务器上。
|
2022-11-15 15:03:30 +08:00
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
## 小程序应用
|
2022-11-15 15:03:30 +08:00
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
通过小程序专用的模板创建项目并安装依赖:
|
2022-11-15 15:03:30 +08:00
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
```bash
|
|
|
|
$ npm create ice ice-app --template @ice/miniapp-scaffold
|
|
|
|
$ cd ice-app
|
|
|
|
$ npm install
|
2022-11-15 15:03:30 +08:00
|
|
|
```
|
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
可以看到项目的 `package.json` 中已经配置好命令:
|
2022-11-15 15:03:30 +08:00
|
|
|
|
|
|
|
```json title=package.json
|
|
|
|
"scripts": {
|
|
|
|
"start": "ice start",
|
2023-01-06 15:07:39 +08:00
|
|
|
"start:wechat": "ice start --target wechat-miniprogram",
|
|
|
|
"start:ali": "ice start --target ali-miniapp",
|
2022-11-15 15:03:30 +08:00
|
|
|
"build": "ice build",
|
2023-01-06 15:07:39 +08:00
|
|
|
"build:wechat": "ice build --target wechat-miniprogram",
|
|
|
|
"build:ali": "ice start --target ali-miniapp"
|
2022-11-15 15:03:30 +08:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
### 小程序调试
|
|
|
|
|
2022-11-15 15:03:30 +08:00
|
|
|
当需要开发调试小程序时,执行对应的命令即可。例如,需要开发调试微信小程序时,执行
|
|
|
|
|
|
|
|
```shell
|
|
|
|
$ npm run start:wechat
|
|
|
|
```
|
|
|
|
|
|
|
|
编译完成后,命令行会给出相应提示,提醒开发者使用对应的小程序开发者工具打开编译产物目录进行调试预览:
|
|
|
|
|
|
|
|
```shell
|
|
|
|
Use wechat-miniprogram developer tools to open the following folder:
|
2022-11-17 20:04:44 +08:00
|
|
|
~/miniapp-project/build
|
2022-11-15 15:03:30 +08:00
|
|
|
```
|
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
编译完成后,命令行会给出相应提示,提醒开发者使用对应的小程序开发者工具打开编译产物目录进行调试预览:
|
2022-07-01 16:47:25 +08:00
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
```shell
|
|
|
|
Use wechat-miniprogram developer tools to open the following folder:
|
|
|
|
~/miniapp-project/build
|
2022-07-01 16:47:25 +08:00
|
|
|
```
|
|
|
|
|
2022-11-15 15:03:30 +08:00
|
|
|
### 小程序部署发布
|
|
|
|
|
2022-11-17 20:04:44 +08:00
|
|
|
仍以微信小程序为例,执行以下命令以构建微信小程序生产环境产物:
|
2022-11-15 15:03:30 +08:00
|
|
|
|
|
|
|
```shell
|
|
|
|
$ npm run build:wechat
|
|
|
|
```
|
|
|
|
|
|
|
|
产物同样默认生成到 `build` 目录下。这时你可以使用对应的小程序开发者工具打开 `build` 目录并将其上传发布。
|