第一周笔记

docs/pages/pjj/01.第一周笔记.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,
+      },
+    ],
+  },
+}
+```
+
+## 扩展性保证
+
+- 扩展组件
+- 扩展编辑功能，如锁定，隐藏
+- 扩展页面信息，如多语言选择
+- 扩展其他功能，如大数据分析和计算
+
+## 研发提效
+
+- 用于创建和发布的脚手架
+- 公共组件库
+
+## 运维保障
+
+- 线上服务和运维服务
+- 安全
+- 监控和报警
+- 服务扩展性：基于云服务，可以随时扩展机器和配置

docs/pages/pjj/02.脚手架介绍.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
+```