diff --git "a/docs/pages/pjj/01.\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260.md" "b/docs/pages/pjj/01.\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..4d6c7d5
--- /dev/null
+++ "b/docs/pages/pjj/01.\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260.md"
@@ -0,0 +1,86 @@
+# 慕课乐高整体设计
+
+## 需求分析
+
+[慕课乐高需求文档](https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf)
+
+## 范围
+
+架构设计，技术选型
+
+## 模块设计
+
+##### 模板作品创作平台
+
+- 用途：模板作品创作者可以在此平台创作自己的 H5 海报模板
+- 开发方式：由 editor-fe 和 editor-server 的前后端分离模式进行开发
+
+##### 模板作品展示
+
+- 用途：普通用户查看的 H5 作品展示
+- 开发方式：由 SSR 模式开发的 H5
+
+##### 模板作品管理
+
+- 用途：后台管理人员管理模板作品等
+- 开发方式：由 admin-fe 和 admin-server 的前后端分离模式进行开发
+
+![项目模块关系](./images/01_项目模块关系.png "项目模块关系")
+
+## 核心数据结构
+
+##### 数据结构思路
+
+- 每个组件尽量符合 vnode 规范
+- 用数组来组织数据，需要排序
+- 尽量使用引用关系，不要冗余
+
+```js
+{
+  work: {
+    title: "作品标题",
+    setting: {}, // 一些可能的配置项 扩展性保证
+    props: {}, // 页面的一些设置 扩展性保证
+    components: [
+      {
+        id: "1",
+        name: "文本1",
+        tag: "text",
+        attrs: {
+          fontSize: "20px",
+        },
+        children: ["文本1"],
+      },
+      {
+        id: "2",
+        name: "图片1",
+        tag: "image",
+        attrs: {
+          src: "xxx.png",
+          width: "120px",
+        },
+        children: null,
+      },
+    ],
+  },
+}
+```
+
+## 扩展性保证
+
+- 扩展组件
+- 扩展编辑功能，如锁定，隐藏
+- 扩展页面信息，如多语言选择
+- 扩展其他功能，如大数据分析和计算
+
+## 研发提效
+
+- 用于创建和发布的脚手架
+- 公共组件库
+
+## 运维保障
+
+- 线上服务和运维服务
+- 安全
+- 监控和报警
+- 服务扩展性：基于云服务，可以随时扩展机器和配置
diff --git "a/docs/pages/pjj/02.\350\204\232\346\211\213\346\236\266\344\273\213\347\273\215.md" "b/docs/pages/pjj/02.\350\204\232\346\211\213\346\236\266\344\273\213\347\273\215.md"
new file mode 100644
index 0000000..4f58ad8
--- /dev/null
+++ "b/docs/pages/pjj/02.\350\204\232\346\211\213\346\236\266\344\273\213\347\273\215.md"
@@ -0,0 +1,260 @@
+# 脚手架架构设计和框架搭建
+
+## 脚手架核心价值
+
+将研发过程：
+
+- 自动化：项目重复代码拷贝/git 操作/发布上线操作
+- 标准化：项目创建/git flow/发布流程/回滚流程
+- 数据化：研发过程系统化、数据化、使得研发过程可量化
+
+## 和自动化构建工具区别
+
+问题：jenkins、travis 等自动化构建工具已经比较成熟了，为什么还需要自研脚手架？
+
+- 不满足需求：jenkins、travis 通常再 git hooks 中触发，需要在服务端执行，无法覆盖研发人员本地的功能，如：创建项目自动化、本地 git 操作自动化等
+- 定制复杂：jenkins、travis 定制过程需要开发插件，其过程较为复杂，需要使用 Java 语言，对前端不够友好
+
+## 脚手架简介
+
+脚手架本质是一个操作系统的客户端，它通过命令行执行，比如：
+
+```
+vue create vue-test-app --force -r https://registry.npm.taobao.org
+```
+
+- 主命令：vue
+- command：create
+- command 的 param：vue-test-app
+- options：--force 为配置项，默认参数为 true；-r 也为配置项，并且是--registry 的简写,https:/<span>/registry.npm.taobao.org 为参数，且可以自定义配置项的参数个数
+
+## 脚手架的执行原理
+
+![脚手架的执行原理](./images/02_脚手架执行原理.png "脚手架的执行原理")
+
+执行顺序
+
+- 在终端输入 vue create vue-test-app
+- 终端解析 vue 命令
+- 终端在环境变量中找到 vue 命令
+- 终端根据 vue 命令链接到实际文件 vue.js
+- 终端利用 node 执行 vue.js
+- vue.js 解析 command/options
+- vue.js 执行 command
+- 执行完成，退出执行
+
+## 脚手架实现原理
+
+- 为什么全局安装 @vue/cli 后会添加的命令为 vue？
+  根据 @vue/cli 的 package.json 文件中 bin 选项
+
+  ```json
+  "bin": {
+    "vue": "bin/vue.js"
+  },
+  ```
+
+  <br>
+
+- 全局安装 @vue/cli 时发生了什么？
+  <span>1.npm 将安装包 @vue/cli 下载至全局的 node_modules 中(可通过 npm root -g 查看安装位置) </span>
+  <span>2.解析@vue/cli 的 package.json 文件，如果由 bin 选项，就会在 npm 的目录下增加命令 vue 软链接至 "bin/vue.js"文件 </span>
+
+  <br>
+
+- 执行 vue 命令时发生了什么？为什么 vue 指向一个 js 文件，我们却可以直接通过 vue 命令去执行它？
+  <span>1.在 npm 的目录下执行 vue，相当于执行软链接的"bin/vue.js"</span>
+  <span>2.在"bin/vue.js"文件中第一行代码 #!/usr/bin/env node 会根据当前用户 node 的环境变量，用 node 去执行该 js 文件</span>
+
+##### \*补充
+
+- 给文件添加可执行权限
+
+```
+chmod 777 test.js
+```
+
+## 脚手架原理进阶
+
+- 为什么说脚手架的本质是操作系统的客户端？它和我们在 PC 上安装应用软件有什么区别？
+  因为 node 本身就是操作系统的客户端，和 PC 上安装的应用软件没有本质的区别，只是没有 GUI
+
+- 如何为 node 脚手架命令创建别名
+  可以将软链接指向另一个软链接
+
+## 脚手架开发流程详解
+
+### 开发流程
+
+- 创建 npm 项目
+- 创建脚手架入口文件，最上方添加
+
+```
+#!/usr/bin/env node
+```
+
+- 配置 package.json 添加 bin 属性
+- 编写脚手架代码
+- 将脚手架发布到 npm
+
+### 使用流程
+
+- 安装脚手架
+
+```
+npm install -g your-own-cli
+```
+
+- 使用脚手架
+
+```
+your-own-cli
+```
+
+### 脚手架开发难点解析
+
+- 分包：将复杂的系统拆分成若干个模块
+- 命令注册额：
+
+```
+vue create
+vue add
+vue invoke
+```
+
+- 参数解析：
+
+  - options 全称：--verison、--help
+  - options 简写：-V、-h
+  - 带 params 的 options：--path /Users/pujunjie/Desktop/
+
+示例：
+
+```
+vue command [options] <params>
+```
+
+帮助文档：
+
+- global help
+  - Usage
+  - Options
+  - Commands
+
+示例：vue 的帮助信息：
+
+```
+Usage: vue <command> [options]
+
+Options:
+  -V, --version                              output the version number
+  -h, --help                                 output usage information
+
+Commands:
+  create [options] <app-name>                create a new project powered by vue-cli-service
+  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
+  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
+  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
+  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
+  build [options] [entry]                    build a .js or .vue file in production mode with zero config
+  ui [options]                               start and open the vue-cli ui
+  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
+  config [options] [value]                   inspect and modify the config
+  outdated [options]                         (experimental) check for outdated vue cli service / plugins
+  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
+  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
+  info                                       print debugging information about your environment
+
+  Run vue <command> --help for detailed usage of given command.
+```
+
+- command help
+  - Usage
+  - Options
+
+vue create 的帮助信息
+
+```
+Usage: create [options] <app-name>
+
+create a new project powered by vue-cli-service
+
+Options:
+  -p, --preset <presetName>       Skip prompts and use saved or remote preset
+  -d, --default                   Skip prompts and use default preset
+  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
+  -m, --packageManager <command>  Use specified npm client when installing dependencies
+  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
+  -g, --git [message]             Force git initialization with initial commit message
+  -n, --no-git                    Skip git initialization
+  -f, --force                     Overwrite target directory if it exists
+  --merge                         Merge target directory if it exists
+  -c, --clone                     Use git clone when fetching remote preset
+  -x, --proxy <proxyUrl>          Use specified proxy when creating project
+  -b, --bare                      Scaffold project without beginner instructions
+  --skipGetStarted                Skip displaying "Get started" instructions
+  -h, --help                      output usage information
+```
+
+还有很多，比如：
+
+- 命令行交互
+- 日志打印
+- 命令行文件变色
+- 网络通信：HTTP/WebSocket
+- 文件处理
+
+### 脚手架本地 link 标准流程
+
+链接本地脚手架：
+
+```
+cd your-cli-dir
+npm link
+```
+
+链接本地库文件：
+
+```
+cd your-lib-dir
+npm link
+cd your-cli-dir
+npm link your-lib-dir
+```
+
+取消链接本地库文件：
+
+```
+cd your-lib-dir
+npm unlink
+cd your-cli-dir
+# link存在
+npm unlink your-lib-dir
+# link不存在
+npm -rf node_modules
+npm install your-lib
+```
+
+理解 npm link：
+
+- npm link your-lib：将当前项目中 node_modules 下指定的库文件链接到 node 全局 node_modules 下的库文件
+- npm link：将当前项目链接到 node 全局 node_modules 中作为一个库文件，并解析 bin 配置创建可执行文件
+
+理解 npm unlink：
+
+- npm unlink：将当前项目从 node 全局 node_modules 中移除
+- npm unlink your-lib：将当前项目中的库文件
+
+分包流程
+
+```
+cd your-lib-dir
+npm link
+cd your-cli-dir
+npm link
+npm i your-lib
+# 使用本地lib包
+npm link your-lib
+# 使用线上lib包
+npm unlink your-lib
+```
diff --git "a/docs/pages/pjj/03.Lerna\345\255\246\344\271\240.md" "b/docs/pages/pjj/03.Lerna\345\255\246\344\271\240.md"
new file mode 100644
index 0000000..e8c2ca9
--- /dev/null
+++ "b/docs/pages/pjj/03.Lerna\345\255\246\344\271\240.md"
@@ -0,0 +1,168 @@
+## Lerna 简介
+
+### 原生脚手架开发痛点分析
+
+- 痛点一：重复操作
+  - 多 Package 本地 link
+  - 多 Package 依赖安装
+  - 多 Package 单元测试
+  - 多 Package 代码提交
+  - 多 Package 代码发布
+    <br>
+- 痛点二：版本一致性
+  - 发布时版本一致性
+  - 发布后相互依赖版本升级
+
+##### \*备注
+
+package 越多，管理复杂度越高
+
+### 关于 Lerna
+
+Lerna 是一个优化基于 git+npm 的多 package 项目的管理工具
+
+#### 优势
+
+- 大幅减少重复操作
+- 提升操作的标准化
+
+Lerna 是架构优化的产物，它提示一个架构真理：项目复杂度提升后，就需要对项目进行架构优化。架构优化的主要目标往往都是以效能为核心。
+
+官网：https://lerna.js.org/
+案例：
+
+- babel：https://github.com/babel/babel
+- vue-cli：https://github.com/vuejs/vue-cli
+- create-react-app：https://github.com/facebook/create-react-app
+
+#### Lerna 开发脚手架流程
+
+![Lerna开发脚手架流程](./images/03_Lerna开发脚手架流程.png "Lerna开发脚手架流程")
+
+### 基于 Lerna 创建项目
+
+安装 Lerna
+
+```
+npm install -g lerna
+```
+
+创建项目
+
+```
+git init imooc-cli-test && cd imooc-cli-test
+```
+
+初始化 Lerna 项目
+
+```
+lerna init
+```
+
+创建 Package
+
+```
+lerna create @imooc-cli/core
+```
+
+安装依赖
+
+```
+lerna add mocha packages/core --dev
+```
+
+删除依赖
+
+```
+lerna clean
+```
+
+重新安装依赖
+
+```
+lerna bootstrap
+```
+
+执行 npm 命令（例如：单元测试）
+
+```
+lerna run test
+```
+
+执行特定包的单元测试
+
+```
+lerna run test @imooc-cli-test/core
+```
+
+link 项目
+
+```
+lerna link
+```
+
+发布项目
+
+```
+lerna publish
+```
+
+### Lerna 使用细节
+
+- lerna init：
+  - 会自动完成 git 初始化，但不会创建.gitignore 文件,这个必须要手动添加，否则会将 node_modules 目录都上传到 git，如果 node_modules 已经加入 git stage，可使用：
+
+```
+git reset HEAD <filename>
+```
+
+执行 unstage 操作，如果文件已经被 git 监听到变更，可使用：
+
+```
+git checkout -- <filename>
+```
+
+将变更作废，记得在执行操作之前将文件加入.gitignore
+
+- lerna add：
+  - 第一个参数：添加 npm 包名
+  - 第二个参数：本地 package 的路径
+  - 选项：
+    - --dev：将依赖安装到 devDependceies，不加时安装到 dependencies
+
+```
+lerna add <package> [loc] --dev
+```
+
+- lerna link：
+
+  - 如果未发布上线，需要手动将依赖添加到 package.json 再执行 lerna link
+    <br>
+
+- lerna clean：
+
+  - 只会删除 node_modules，不会删除 package.json 中的依赖
+    <br>
+
+- lerna exec 和 lerna run：
+
+  - --scoped 属性后添加的是包名，而不是 package 的路径，这点和 lerna add 用法不同
+    <br>
+
+- lerna publish：
+
+  - 发布时会自动执行：git add package-lock.json,所以 package-lock.json 不要加入.gitignore
+
+  - 先创建远程仓库，并且同步一次 master 分支
+
+  - 执行 lerna publish 前先完成 npm login
+
+  - 如果发布的 npm 包名为：@xxx/yyy 的格式，需要先在 npm 注册名为 xxx 的 organization，否则可能会提交不成功
+
+  - 发布到 npm group 时默认为 private，所以我们需要手动在 package.json 中添加如下配置：
+
+  ```
+  "publishConfig":{
+    "access": "publish"
+  }
+  ```
diff --git a/docs/pages/pjj/README.md b/docs/pages/pjj/README.md
new file mode 100644
index 0000000..57a4ed6
--- /dev/null
+++ b/docs/pages/pjj/README.md
@@ -0,0 +1,3 @@
+# pjj - 学习记录
+
+请直接看下级目录
diff --git "a/docs/pages/pjj/images/01_\351\241\271\347\233\256\346\250\241\345\235\227\345\205\263\347\263\273.png" "b/docs/pages/pjj/images/01_\351\241\271\347\233\256\346\250\241\345\235\227\345\205\263\347\263\273.png"
new file mode 100644
index 0000000..4c7578b
Binary files /dev/null and "b/docs/pages/pjj/images/01_\351\241\271\347\233\256\346\250\241\345\235\227\345\205\263\347\263\273.png" differ
diff --git "a/docs/pages/pjj/images/02_\350\204\232\346\211\213\346\236\266\346\211\247\350\241\214\345\216\237\347\220\206.png" "b/docs/pages/pjj/images/02_\350\204\232\346\211\213\346\236\266\346\211\247\350\241\214\345\216\237\347\220\206.png"
new file mode 100644
index 0000000..02eba01
Binary files /dev/null and "b/docs/pages/pjj/images/02_\350\204\232\346\211\213\346\236\266\346\211\247\350\241\214\345\216\237\347\220\206.png" differ
diff --git "a/docs/pages/pjj/images/03_Lerna\345\274\200\345\217\221\350\204\232\346\211\213\346\236\266\346\265\201\347\250\213.png" "b/docs/pages/pjj/images/03_Lerna\345\274\200\345\217\221\350\204\232\346\211\213\346\236\266\346\265\201\347\250\213.png"
new file mode 100644
index 0000000..5e8af08
Binary files /dev/null and "b/docs/pages/pjj/images/03_Lerna\345\274\200\345\217\221\350\204\232\346\211\213\346\236\266\346\265\201\347\250\213.png" differ