docs: fixed textual error in start.md

noopn · JackLian · commit c45192b698d7 · 2023-01-03T19:13:57.000+08:00
diff --git a/docs/docs/guide/quickStart/start.md b/docs/docs/guide/quickStart/start.md
@@ -2,75 +2,101 @@
 sidebar_position: 2
 title: 快速开始
 ---
+
 ## 前置知识
+
 我们假定你已经对 HTML 和 JavaScript 都比较熟悉了。即便你之前使用其他编程语言，你也可以跟上这篇教程的。除此之外，我们假定你也已经熟悉了一些编程的概念，例如，函数、对象、数组，以及 class 的一些内容。
 
 如果你想回顾一下 JavaScript，你可以阅读[这篇教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)。注意，我们也用到了一些 ES6（较新的 JavaScript 版本）的特性。在这篇教程里，我们主要使用了[箭头函数（arrow functions）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)、[class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)、[let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let) 语句和 [const](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const) 语句。你可以使用 [Babel REPL](https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpeAJTjDgUACIB5ALLK6aRklTRBQ0KCohMQk6Bx4gA) 在线预览 ES6 的编译结果。
 
 ## 环境准备
+
 ### WSL（Window 电脑）
+
 Window 环境需要使用 WSL 在 windows 下进行低代码引擎相关的开发。安装教程 ➡️ [WSL 安装教程](https://docs.microsoft.com/zh-cn/windows/wsl/install)。<br />**对于 Window 环境来说，之后所有需要执行命令的操作都是在 WSL 终端执行的。**
+
 ### Node
+
 node 版本推荐 16.18.0。
 
 #### 查看 Node 版本
+
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01oCZKNz290LIu8YUTk_!!6000000008005-2-tps-238-70.png)
 
 #### 通过 n 来管理 node 版本
+
 可以安装 [n](https://www.npmjs.com/package/n) 来管理和变更 node 版本。
 
 ##### 安装 n
+
 ```bash
 npm install -g n
 ```
 
 ##### 变更 node 版本
+
 ```bash
 n 14.17.0
 ```
 
 ### React
+
 低代码引擎的扩展能力都是基于 React 来研发的，在继续阅读之前最好有一定的 React 基础，React 学习教程 ➡️ [React 快速开始教程](https://zh-hans.reactjs.org/docs/getting-started.html)。
 
 ### 下载 Demo
-可以前往 github（https://github.com/alibaba/lowcode-demo）将 DEMO 下载到本地。
+
+可以前往 github（<https://github.com/alibaba/lowcode-demo>）将 DEMO 下载到本地。
 
 #### git clone
+
 ##### HTTPS
+
 需要使用到 git 工具
+
 ```bash
 git clone https://github.com/alibaba/lowcode-demo.git
 ```
+
 ##### SSH
+
 需要配置 SSH key，如果没有配置可以
+
 ```bash
 git clone git@github.com:alibaba/lowcode-demo.git
 ```
 
 #### 下载 Zip 包
+
 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01iYC7E11phaNwLFUrN_!!6000000005392-2-tps-3584-1794.png)
 
 ### 选择一个 demo 项目
-在  以 `demo-general` 为例：
+
+在 以 `demo-general` 为例：
+
 ```bash
 cd demo-general
 ```
 
 ### 安装依赖
+
 在 `lowcode-demo/demo-general` 目录下执行：
+
 ```bash
 npm install
 ```
 
 ### 启动 demo
+
 在 `lowcode-demo/demo-general` 目录下执行：
+
 ```bash
 npm run start
 ```
 
 之后就可以通过 [http://localhost:5556/](http://localhost:5556/) 来访问我们的 DEMO 了。
 
 ## 认识 Demo
+
 我们的 Demo 是一个**低代码平台的设计器**。它是一个低代码平台中最重要的一环，用户可以在这里通过拖拽、配置、写代码等等来完成一个页面的开发。由于用户的人群不同、场景不同、诉求不同等等，这个页面的功能就会有所差异。
 
 这里记住**设计器**这个词，它描述的就是下面的这个页面，后面我们会经常看到它。
@@ -95,6 +121,7 @@ Demo 根据**不同的设计器所需要的物料不同**，分为了下面的 8
 ![](https://img.alicdn.com/imgextra/i1/O1CN01EU2jRN1wUwlal17WK_!!6000000006312-2-tps-3110-1974.png)
 
 ### 目录介绍
+
 仓库下每个 demo-xxx-xxx 目录都是一个可独立运行的 demo 工程，分别对应到刚刚介绍的场景。
 
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN01ztxv5Y1mJozBsLdni_!!6000000004934-2-tps-696-958.png)
@@ -104,11 +131,12 @@ Demo 根据**不同的设计器所需要的物料不同**，分为了下面的 8
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN01A50oW522S5zg2eDUH_!!6000000007118-2-tps-732-1384.png)
 
 介绍下其中主要的内容
+
 - 设计器入口文件 `source/index.ts` 这个文件做了下述几个事情：
   - 通过 plugins.register 注册各种插件，包括官方插件 (已发布 npm 包形式的插件) 和 `plugins` 目录下内置的示例插件
   - 通过 init 初始化低代码设计器
 - plugins 目录，存放的都是示例插件，方便用户从中看到一个插件是如何实现的
-- services 目录，模拟数据请求、提供默认 schema、默认资产包等，此目录下内容在真是项目中应替换成真是的与服务端交互的服务。
+- services 目录，模拟数据请求、提供默认 schema、默认资产包等，此目录下内容在真实项目中应替换成真实的与服务端交互的服务。
 - 预览页面入口文件 `preview.tsx`
 
 剩下的各位看官可以通过源码来进一步了解。
@@ -118,11 +146,15 @@ Demo 根据**不同的设计器所需要的物料不同**，分为了下面的 8
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01YJVcOd1PiL1am6bz2_!!6000000001874-2-tps-3248-1970.png)
 
 接下来我们就根据我们自己的诉求通过对设计器进行扩展，改动成我们需要的设计器功能。
+
 ## 开发一个插件
+
 ### 方式 1：在 DEMO 中直接新增插件
+
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01pXpSRs1QvRyut2EE3_!!6000000002038-2-tps-718-1144.png)
 
 可以在 demo/sample-plugins 直接新增插件，这里我新增的插件目录是 plugin-demo。并且新增了 index.tsx 文件，将下面的代码粘贴到 index.tsx 中。
+
 ```javascript
 import * as React from 'react';
 import { IPublicModelPluginContext } from '@alilc/lowcode-types';
@@ -136,7 +168,7 @@ const LowcodePluginPluginDemo = (ctx: IPublicModelPluginContext) => {
         func: () => {
           console.log('方法也是一样');
         },
-      }
+      };
     },
     // 插件的初始化函数，在引擎初始化之后会立刻调用
     init() {
@@ -170,7 +202,7 @@ LowcodePluginPluginDemo.meta = {
   engines: {
     lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行
   },
-}
+};
 
 export default LowcodePluginPluginDemo;
 ```
@@ -182,8 +214,11 @@ export default LowcodePluginPluginDemo;
 这样在我们的设计器中就新增了一个 Demo 面板。
 
 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01wtPIOV1TQiFLz5Vkf_!!6000000002377-2-tps-3584-1806.png)
+
 ### 方式 2：在新的仓库下开发插件
+
 初始化
+
 ```bash
 npm init @alilc/element your-plugin-name
 ```
@@ -201,11 +236,13 @@ npm init @alilc/element your-plugin-name
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01iVIAXD1XVWsOdKttI_!!6000000002929-2-tps-3584-2020.png)
 
 在插件项目下安装依赖
+
 ```bash
 npm install
 ```
 
 启动项目
+
 ```bash
 npm run start
 ```
@@ -220,9 +257,10 @@ npm run start
 
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01uqSmrX1oqupxeGH1m_!!6000000005277-2-tps-3584-2020.png)
 
-
 ## 开发一个自定义物料
+
 ### 初始化物料
+
 ```bash
 npm init @alilc/element your-material-demo
 ```
@@ -240,19 +278,25 @@ npm init @alilc/element your-material-demo
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN01SU2xn91TZPlzcARVI_!!6000000002396-2-tps-3584-2020.png)
 
 ### 启动并调试物料
+
 #### 安装依赖
+
 ```bash
 npm i
 ```
+
 #### 启动
+
 ```bash
 npm run lowcode:dev
 ```
 
 我们就可以通过 [http://localhost:3333/](http://localhost:3333/) 看到我们的研发的物料了。
 
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01JqoHqc1z7zlSWFYJD_!!6000000006668-2-tps-3584-1790.png)
+
 #### 在 Demo 中调试
+
 ```bash
 npm i @alilc/build-plugin-alt
 ```
@@ -262,6 +306,7 @@ npm i @alilc/build-plugin-alt
 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01K7u7ci1KCfYlBj2yf_!!6000000001128-2-tps-1388-1046.png)
 
 如图，新增如下代码
+
 ```javascript
 [
   '@alilc/build-plugin-alt',
@@ -281,12 +326,15 @@ npm i @alilc/build-plugin-alt
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN0166WywE26Lv7NuJMus_!!6000000007646-2-tps-3584-1812.png)
 
 ### 发布
+
 首先进行构建
+
 ```bash
 npm run lowcode:build
 ```
 
 发布组件
+
 ```bash
 npm publish
 ```
@@ -344,6 +392,7 @@ npm publish
 ```
 
 ### 使用
+
 我们将刚刚发布的组件的 assets-prod.json 的内容放到 demo 的 src/universal/assets.json 中。
 
 > 最好放到最后，防止因为资源加载顺序问题导致出现报错。
@@ -356,5 +405,7 @@ npm publish
 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01UNp89s1vQXKyfsFaL_!!6000000006167-2-tps-3584-2020.png)
 
 这时候再启动 DEMO 项目，就会有新的低代码物料了。接下来就按照你们的需求，继续扩展物料吧。
+
 ## 总结
+
 这里只是简单的介绍了一些低代码引擎的基础能力，带大家简单的对低代码 DEMO 进行扩展，定制一些新的功能。低代码引擎的能力还有很多很多，可以继续去探索更多的功能。
