docs: update cli related docs

This commit is contained in:
JackLian 2022-12-02 17:19:14 +08:00 committed by 刘菊萍(絮黎)
parent 7674e27f83
commit e5011c3d16
2 changed files with 41 additions and 38 deletions

View File

@ -8,34 +8,34 @@ sidebar_position: 0
1. clone 低代码项目的官方 demo直接启动项目。适合普通人。
2. 手工引入低代码 UMD 包,手工配置、打包和启动。适合 Webpack 配置工程师。
## 方法 1: 以官方 Demo 为基础使用
可以通过两种方式之一获取低代码编辑器的示例代码:
1. 直接[在 github 仓库下](https://github.com/alibaba/lowcode-demo)进行下载
![](https://img.alicdn.com/imgextra/i3/O1CN01PfGV3h1oJ1Wv3sakc_!!6000000005203-2-tps-1500-517.png)
2. 如果本地安装了 git可以通过 git clone 方式进行下载
(这个方法的好处是 demo 有了更新,可以通过 merge 方式跟上)
```bash
git clone https://github.com/alibaba/lowcode-demo.git
```
拉取仓库代码后,需要进行如下配置或安装过程:
## 方法 1通过官方命令行工具创建编辑器
1. 确保本地安装了 Node.js 和 npm如果没有[您可以通过 nvm 进行快捷的安装](https://github.com/nvm-sh/nvm)
2. 确保为 npm [设置了可以访问的 npm 源,保证安装过程无网络问题](https://npmmirror.com/)
3. 选择目录下其中一个 demo 工程进入,建议选择 `demo-general`
3. 安装官方命令行工具
```bash
cd demo-general
npm install -g @alilc/create-element@latest
```
4. 安装依赖
4. 通过命令行工具创建
```bash
npm init @alilc/element editor-project-name
```
这时会看到一个选项列表
<img src="https://img.alicdn.com/imgextra/i3/O1CN01LAaw2R1veHDYUzGB1_!!6000000006197-2-tps-676-142.png" width="350"/>
选择`编辑器`,并填写对应的问题,即可完成创建。
> 注 @alilc/create-element 版本需 >= 1.0.4,若看不到`编辑器`选项,请重新执行步骤 3
5. 进入创建后的目录
```bash
cd editor-project-name
```
6. 安装依赖
```bash
npm install
```
5. 安装依赖成功后,启动项目 (注意观察上一步的输出,如有 error 等失败信息,请先进行排查)
7. 安装依赖成功后,启动项目 (注意观察上一步的输出,如有 error 等失败信息,请先进行排查)
```bash
npm start
```

View File

@ -16,21 +16,24 @@ sidebar_position: 7
## 脚手架功能
### 脚手架初始化
```shell
$ npm init @alilc/element your-element-name
```bash
npm init @alilc/element your-element-name
```
不写 your-element-name 的情况下,则在当前目录创建。
> 觉得安装速度比较慢的同学,可以设置 npm 国内镜像,如
> 注 1如遇错误提示 `sh: create-element: command not found` 可先执行下述命令
```bash
$ npm init @alilc/element your-element-name --registry=https://registry.npmmirror.com
npm install -g @alilc/create-element
```
> 注 2觉得安装速度比较慢的同学可以设置 npm 国内镜像,如
```bash
npm init @alilc/element your-element-name --registry=https://registry.npmmirror.com
```
选择对应的元素类型,并填写对应的问题,即可完成创建。
![image.png](https://img.alicdn.com/imgextra/i3/O1CN01SNaXUg1g4LurKuBHs_!!6000000004088-2-tps-688-148.png)
![image.png](https://img.alicdn.com/imgextra/i3/O1CN01LAaw2R1veHDYUzGB1_!!6000000006197-2-tps-676-142.png)
### 脚手架本地环境调试
@ -43,7 +46,7 @@ npm start
### 脚手架构建
```bash
$ npm run build
npm run build
```
### 脚手架发布
@ -51,19 +54,14 @@ $ npm run build
修改版本号后,执行如下指令即可:
```bash
$ npm publish
npm publish
```
# 🔥🔥🔥 调试物料/插件/设置器
## 🔥🔥🔥 调试物料/插件/设置器
> 📢📢📢 低代码生态脚手架提供的调试利器,在启动 setter/插件/物料 项目后,直接在已有的低代码平台就可以调试,不需要 npm link / 手改 npm main 入口等传统方式,轻松上手,强烈推荐使用!!
注:若控制台出现如下错误,直接访问一次该 url 即可~
![image.png](https://img.alicdn.com/imgextra/i1/O1CN01cvKmeK1saCqpIxbLW_!!6000000005782-2-tps-1418-226.png)
## 组件/插件/Setter 侧
### 组件/插件/Setter 侧
1. 插件/setter 在原有 alt 的配置中添加相关的调试配置
```json
@ -120,7 +118,7 @@ $ npm publish
https://lowcode-engine.cn/demo/demo-general/index.html?debug
```
## 项目侧的准备
### 项目侧的准备
> 如果你的低代码项目 fork 自官方 demo那么项目侧的准备已经就绪不用再看以下内容~
@ -175,7 +173,12 @@ $ npm publish
}
```
# Meta 信息
注:若控制台出现如下错误,直接访问一次该 url 即可~
![image.png](https://img.alicdn.com/imgextra/i1/O1CN01cvKmeK1saCqpIxbLW_!!6000000005782-2-tps-1418-226.png)
## Meta 信息
meta 信息是放在生态元素 package.json 中的一小段 json用户可以通过 meta 了解到这个元素的一些基本信息,如元素类型,一些入口信息等。
```typescript