先说结论：一个"看 Git 仓库"的 App，技术底座其实只有四件事——HTTP 请求、解压、文件树、Markdown 渲染。听起来都不难，但每一步踩进去，都能遇到点鸿蒙特有的"惊喜"。

① 访问 Git 平台 API：连 PATCH 都没有的 http 模块

MarkBook 支持 GitHub / Gitee / GitLab / 云效多个平台。公开仓库的浏览基本不需要登录，走的就是各平台的 REST API。鸿蒙这边用 @ohos.net.http：

import { http } from '@kit.NetworkKit';

async function getJson(url: string): Promise<Record<string, Object>> {
  const req = http.createHttp();
  try {
    const res = await req.request(url, {
      method: http.RequestMethod.GET,
      header: { 'Accept': 'application/json', 'User-Agent': 'MarkBook' },
      readTimeout: 30000
    });
    const text = res.result as string;
    return JSON.parse(text) as Record<string, Object>;
  } finally {
    req.destroy(); // 复用实例必须手动销毁，否则连接泄漏
  }
}

坑有两个。第一个是平台差异：GitHub、Gitee、GitLab、云效的接口形状各不相同（树接口、提交接口、文件 URL 规则都不一样），得在 Service 层做一层归一化适配器，上层只管"给我 owner / repo / 路径"。第二个是 ArkTS 严格模式：res.result 不能当 any 直接用，要 as string 单次转型；接口必须显式定义，不能写未类型化的对象字面量。

顺带一提 API 24 的一个限制：http.RequestMethod 里没有 PATCH，GitLab 某些接口要用 PATCH 时，只能拿 PUT 替代或换接口。

② 自研 DEFLATE 解压：最硬核的一段

Git 平台的响应默认 gzip 压缩，尤其是仓库文件内容，体积能差一个数量级。按说解压是现成的事——但鸿蒙 util 模块在这个 API 级别没有 Inflater 类，DEFLATE 解压得自己实现。

DEFLATE 是什么？一句话：LZ77 长度-距离匹配 + Huffman 编码。压缩流里分三种块：不压缩块、固定 Huffman 块、动态 Huffman 块。动态块要先解出"码长序列"再重建 Huffman 表。位流是 LSB-first（低字节在前），这是最容易写错的地方。

核心骨架长这样（完整实现约两百行，这里是关键思路）：

// 逐位读取：DEFLATE 位流从最低位开始
class BitReader {
  private pos: number = 0;
  private bit: number = 0;

  constructor(private buf: Uint8Array) {}

  readBits(n: number): number {
    let val = 0;
    for (let i = 0; i < n; i++) {
      const b = this.buf[this.pos];
      val |= ((b >> this.bit) & 1) << i;
      if (++this.bit === 8) { this.bit = 0; this.pos++; }
    }
    return val;
  }
}

// 动态 Huffman 块：先读码长 → 重建字面/长度、距离两张 Huffman 表
// 然后主循环：读符号 → 256 结束 / 字面量直出 / 长度+距离 → 从滑动窗口回拷

主循环就一句话：读到 0~255 直接输出；读到 256 结束当前块；读到 257~285，再跟一个距离，从"滑动窗口"里回拷一段历史字节拼出来。gzip 格式额外带一个 1f 8b 头和一个 CRC32 尾巴，zlib 又是另一套头（78 开头 + ADLER32）。Git 平台给的是 gzip，所以 1f 8b 头、CRC32 校验都要自己处理。

这段写完，最有成就感的一刻是：一个几十 MB 的仓库文件列表，手机上从"转圈"变成"秒开"。那一刻你才真正理解什么叫"把原理吃透了"。

③ 文件树：展开哪层，才加载哪层

仓库目录是棵树。最朴素的写法是调一次"递归树"接口，把整棵目录拉下来——小仓库没问题，大仓库直接卡死。

MarkBook 的做法是懒加载：列表展开一个目录，才去请求它的子项，并且用 V2 状态管理装饰器管住每一层节点的加载状态：

@ObservedV2
class RepoNode {
  @Trace path: string = '';
  @Trace type: string = 'blob';      // 'tree' | 'blob'
  @Trace children: RepoNode[] = [];  // 已加载的子节点
  @Trace loaded: boolean = false;    // 是否已请求过

  get isDir(): boolean { return this.type === 'tree'; }
}

用户点开 src/，才去请求 src/ 的子项；点开 docs/，才加载 docs/。树的每一层互不打扰，滚动也顺。

④ Markdown 渲染 + 代码块复制

README、文档在手机上直接渲染成排版好的页面。这里有两个移动端特有的讲究：一是代码块要能一键复制（长按弹出复制菜单，ArkUI 里用自定义上下文菜单实现）；二是长文档别一上来就全量解析，先渲染首屏、滚动再补充，避免大 Markdown 卡 UI。

⑤ 平板分栏：一套布局，两种形态

最新版给平板做了专门适配：平板横屏时 Navigation 走 Split 分栏模式——左栏仓库/文件列表，右栏文件详情，像桌面 IDE 一样对照着看；手机上退回底部导航的 Stack 模式。ArkUI 的 Navigation + NavPathStack 天然支持这两种模式切换：

Navigation(this.pathStack) {
  // 左栏列表 + 右栏详情
}
.mode(isWide() ? NavigationMode.Split : NavigationMode.Stack)

判断宽屏用的是 display.getDefaultDisplaySync()，宽度够就分栏、不够就堆叠，一套代码两种形态；折叠屏合上、展开时还要监听尺寸变化动态切换。

ArkTS 严格模式：编译期就把你教做人

写 MarkBook 是第一次全量吃 ArkTS 严格模式，几个"名场面"：

• catch (e: Error) 不能写类型注解，得去掉，函数体里再手动判断；
• 不许解构，const { a } = obj 直接编译失败，改成 obj.a；
• 不许 any、不许未类型化对象字面量，逼着你把数据结构都定义成 interface；
• Column 组件没有 .maxWidth()，只有 .constraintSize({ maxWidth: ... })。

一开始很烦，写完发现：这些约束其实在逼你写出更可维护的代码——接口先定义清楚，数据形状不会写着写着就飘了。

做得好的 & 还能优化的

做得好的：免登录看公开仓库、路径设计合理；自研解压让大仓库也能秒开；树的懒加载 + 分栏适配，手机上轻快、平板上像 IDE；收藏离线看，没网也能查。

还能优化的：超大仓库的树渲染性能还可以再压；Markdown 的渲染覆盖度（表格、流程图等）还有提升空间；跨平台 API 的归一化适配器目前是"够用"，离"优雅"还有距离。

最后

很多人问"鸿蒙开发难不难"。我的答案在 MarkBook 里：难的不是语法，是"系统思维"——util 里没有 Inflater，那就自己写一个；http 没有 PATCH，那就换条路走。每解决一个这样的问题，你就比"会用框架"的开发者多懂一层。

下一期，我的第二个鸿蒙 App「速印 QuickMark」也上架了——给照片批量加水印，像素级合成引擎 + AGC 端云一体化，继续拆实战。

📥 MarkBook：华为应用市场搜索「MarkBook」即可下载（免费、免登录）。
关注「APP开发实战派」——这个号既分享我的鸿蒙 App，也拆鸿蒙开发实战。下期拆「速印 QuickMark」。

转载请注明来源：
原文链接：http://hanhan.pro/harmonyos-markbook-read-github-code-self-built-deflate-unzip
作者：Reno

作为一个写了多年前端、React / Vue / 小程序都摸过的人，第一次打开 DevEco Studio、面对满屏的 .ets 文件时，我的第一反应和大多数同行一样：又一个要重新学的语言？

但真正上手之后我发现，事情没那么糟——ArkTS 看起来和 TypeScript 几乎一样，ArkUI 的声明式写法也和 React/Vue 有八分神似。真正让我"卡住"的，是那些官方文档没明说的严格模式和工具链细节。

于是就有了今天这篇文章的主角：MarkBook——一款已经上架华为应用市场的鸿蒙原生应用，一个运行在手机上的 Git 仓库管理客户端，纯 ArkTS 实现。

这篇文章想聊聊，作为一个有经验的前端工程师，做鸿蒙应用到底能"白捡"哪些优势、必须补哪些课，以及 ArkTS 和 JS/TS、ArkUI 和 React/Vue 到底差在哪。

核心结论放前面：只要你会 TypeScript + 一种声明式 UI 框架，上手 ArkTS/ArkUI 的成本大概是一到两周。 前端转鸿蒙，比想象中平滑得多。

一、先搞清楚：ArkTS 到底是什么

一句话：ArkTS 是 TypeScript 的严格静态子集，专门为 ArkCompiler 的 AOT 编译优化。

它保留了 TS 绝大部分好用的东西——interface、泛型、async/await——但把 TS 里"灵活"的部分砍掉了，换取编译期就能确定类型的确定性。

对你我这种 TS 老手来说，上面这些"限制"其实不痛不痒——写多了反而发现，严格模式逼着你写出更稳的代码。

二、前端工程师"白捡"的四个优势

1. TypeScript 直接迁移

如果你在项目里已经用了 TS，那么 ArkTS 的语法你大概认识 90%。interface、泛型、async/await、类、枚举……全部直接能用。

2. 声明式 UI + 响应式状态，就是 React/Vue 的"亲戚"

ArkUI 的核心心智模型和 React/Vue 几乎一样：UI 是状态的函数，状态变了 UI 自动更新。

// ArkUI 组件：声明式 + 响应式
@Entry
@Component
struct Counter {
  @State count: number = 0;      // 相当于 useState / ref

  build() {
    Column() {                    // 相当于 flex-direction: column
      Text(`点击了 ${this.count} 次`)
        .fontSize(20)
      Button('+1')
        .onClick(() => { this.count++; })   // 改状态自动刷新 UI
    }
  }
}

React 开发者看到 @State 会心一笑——这不就是 useState 吗？Vue 开发者看到 @State 也会心一笑——这不就是 ref 吗？声明式 + 响应式 + 状态驱动，前端最核心的思维模型在这里全部成立。

3. Flex 布局思维直接平移

ArkUI 没有 CSS，但有你熟悉的 flex：

• Column = display:flex; flex-direction: column
• Row = display:flex; flex-direction: row
• .layoutWeight(1) = flex: 1
• Stack = 定位叠加

写过小程序或 React Native 的人，半小时就能上手 ArkUI 布局。

4. 路由跳转的思路，和小程序 / RN 是同一套

前端最熟的路由跳转，在鸿蒙上也是老熟人，三个平台的核心都是「路由栈 + push/pop + 传参」：

// 鸿蒙：Navigation + NavPathStack
pathStack.pushPath({ name: 'Detail', param: { id: 1 } });   // 相当于 RN 的 navigate
pathStack.pop();                                             // 返回上一页

区别只在两点：

• 小程序参数走 URL query，得拼字符串、再序列化；RN 和鸿蒙直接传 对象（param 可以是任意可序列化对象）
• 小程序要把页面注册进 app.json；鸿蒙新版用 Navigation 的 navDestination 声明式分发，不用全局注册表，路由栈对象还能通过 @Provide/@Consume 在组件树里跨层传递（思路类似 React Context）

写过小程序或 RN 的人，鸿蒙的路由几乎零成本迁移。

三、需要"补课"的四个地方

白捡的多，但要补的也不少。别怕，都是"学一次管终身"的东西。

1. ArkTS 严格模式 —— 最容易被编译错误劝退

前端的 TS 项目里 any 是常态，但 ArkTS 严格模式编译期就拒绝 any，报错还会给你一个 arkts-no-any-unknown 这样的代号。一开始很抓狂，写几周就习惯了，而且代码质量肉眼可见地变好。

2. ArkUI 组件体系 —— 不是 CSS，是链式 API

没有 .class{} 选择器，一切用链式属性：

Column()
  .width('100%')
  .padding(16)
  .backgroundColor('#F5F5F5')
  .borderRadius(12)

记忆成本在于组件 API 很丰富（List、Scroll、Grid、Tabs、Navigation、Swiper……），但都遵循同一套链式风格，查一次文档就能举一反三。

3. Stage 模型 —— 全新的应用生命周期

HarmonyOS 用的是 Stage 模型：UIAbility + module.json5，对应前端的"入口 + 配置文件"。没有 Android 的 Activity、没有 iOS 的 ViewController，需要重新理解一次应用是怎么启动、怎么传参、怎么退到后台的。

4. 工具链 —— 从 npm 到 hvigor

没有 npm run dev，构建用 hvigor，包管理用 ohpm，调试靠 hilog 和 DevEco Studio。签名、上架华为应用市场又是一套流程。这些没有学习门槛，纯粹是"熟能生巧"。

四、我的第一个鸿蒙应用：MarkBook

铺垫了这么多，该上正菜了。

MarkBook 是什么？ 一个运行在手机上的 Git 仓库管理客户端。你可以浏览任意 Git 仓库的文件树、查看文件内容、Markdown 预览、收藏离线阅读、查看提交历史。核心是基于 Git HTTP Smart Protocol 的纯 ArkTS 实现，不需要任何后端。

做它的原因很朴素：鸿蒙生态里几乎没有趁手的 Git 工具，而我在 GitHub 上看代码的习惯又停不下来。需求永远是最好的老师。

下面挑两个最值得说的功能点，讲讲实现思路和踩过的坑。

功能点一：从零实现 Git HTTP Smart Protocol

鸿蒙上没有现成的 Git 客户端库，所以最硬核的部分——Git 协议本身——只能自己写。

实现思路其实是一个标准流程：

1. refs 发现：请求 info/refs?service=git-upload-pack，拿到分支/标签和 HEAD
2. fetch 请求：按 Git Protocol v2 发送 command=fetch + want + deepen
3. 解析响应：处理 pkt-line 分帧 → 找到 PACK 段 → 解析 packfile（变长整数、delta 解压）→ DEFLATE 解压 → 还原出 commit / tree / blob 对象

上面这套流程落到代码上，第 2 步「构造 fetch 请求体」大概长这样：

// 构造 Git Protocol v2 fetch 请求（ArkTS）
const bodyLines: string[] = [];
bodyLines.push(this.encodePktLine('command=fetch\n'));    // 协议命令
bodyLines.push('0001');                                   // 能力/参数分隔符
bodyLines.push(this.encodePktLine('deepen 8\n'));         // 只取最近 8 层历史（按仓库规模动态调整）
bodyLines.push(this.encodePktLine('filter blob:none\n')); // 跳过文件内容，只要 commit/tree
bodyLines.push(this.encodePktLine('done\n'));
// 发请求 → 拿响应 → pkt-line 分帧 → 找 PACK 段 → 解析 packfile → DEFLATE 解压
const response = await this.httpPostBinary(url, bodyLines.join(''),
  'application/x-git-upload-pack-request');

难点主要在三个地方：

• packfile 是二进制格式，边角细节极多（ofs-delta、ref-delta、可变长编码……），和前端熟悉的 JSON 完全是两个世界
• API 24 没有现成的 Inflater，DEFLATE 解压得自己实现
• 大仓库响应体积可达几十 MB，解析时的内存峰值控制不好就 OOM

这部分的收获是"跨语言通用"的：搞懂 Git 的对象模型和 pack 格式之后，任何平台上写 Git 工具都有底。

功能点二：大仓库的性能与内存优化

前端对性能天然敏感，这个习惯在鸿蒙上帮了我大忙。

以 tensorflow 这种超大仓库为例：如果按"逐层遍历文件树"的方式，每个目录要 2~5 次 HTTP 请求，走一遍下来请求量爆炸，还极易 OOM。我的应对策略是：

• 大仓库模式：响应上限从 2MB 放宽，配合降级确认弹窗
• blob SHA 直取：文件列表返回 blob SHA，详情页直接按 SHA 拉内容，绕过整棵树的遍历
• 滑动窗口：包数据内存按需释放，缓存设上限，防止对象滞留堆内存
• 提交历史按仓库规模动态降级：分支多的大仓库逐 commit 获取，控制内存峰值

其中最立竿见影的是「blob SHA 直取」——文件列表把 blob SHA 一起返回，详情页直接按 SHA 拉内容，完全跳过树遍历：

// 详情页：优先用文件列表传来的 blob SHA 直接获取内容
const blobSha = AppStorage.get<string>('detail_blob_sha') ?? '';
if (blobSha !== '') {
  content = await this.gitService.getBlob(blobSha);      // 一条请求搞定
} else {
  content = await this.gitService.getFileContentByPath(  // 回退：沿树逐层找
    this.filePath, ref || undefined);
}

做得好的地方： 纯 ArkTS 零第三方依赖跑通完整 Git 协议；大仓库从"直接崩"到"能打开"；Markdown 渲染、代码高亮、深浅色主题这些体验也做完了。

还能优化的地方： 文件级提交历史目前在主线程解析 packfile，超大仓库会触发系统 THREAD_BLOCK_6S 被强杀，后续要改成 TaskPool 后台线程；Git 操作目前以"浏览"为主，提交、推送、分支管理还没做；本地缓存和离线能力也值得加强。

五、给想尝试的前端同行的建议

1. 别被"新语言"吓住：ArkTS 是 TS 的严格子集，不是新语言。真正的新东西是 ArkUI 组件库和 Stage 模型，但都有官方文档和示例工程。
2. 从 DevEco Studio 的模板工程开始：不要自己从零搭环境，模板会帮你搞定 hvigor/ohpm 的版本匹配，能省掉你半天到一天的踩坑时间。
3. 性能思维是前端的优势：鸿蒙生态还年轻，很多"性能优化"的坑（OOM、主线程阻塞）还没有完整的社区答案，而前端工程师天生对渲染性能、内存泄漏敏感——这恰恰是我们的差异化优势。
4. 先把一个功能做闭环：不要贪多，把一个核心功能从"能用"做到"好用"，比堆功能列表有价值得多。

六、最后

如果你手边有鸿蒙设备，欢迎去华为应用市场搜索 MarkBook 试试——一个前端工程师从零做出来的、已上架的鸿蒙应用。如果你也正在观望鸿蒙开发，希望这篇文章能让你少一点犹豫。

前端开发鸿蒙，难的不是语言，是迈出第一步的勇气。 而我们恰好不缺这个。

转载请注明来源：

• 原文链接：https://hanhan.pro/first-harmonyos-app-development-by-a-frontend-developer/
• 作者：Reno

本文主要讲整合思路和一些心得小结，而不仅仅是简单地讲操作步骤。然后列出一些要点，帮大家避坑。
建议最好先看qiankun官网对qiankun有一点了解再看本文，或者官网文档结合本文一起看。

接入qiankun框架前需要准备的工作

使用qiankun框架一般是用来整合PC端后台管理系统。在整合这些后台系统之前，你需要考虑和准备以下事情：

1. 新开一个简单的项目作为主应用：主应用是用来放统一登录的页面，和各子应用入口的一个页面。首先是需要一个新项目做为qiankun框架的主应用，在其次是考虑到权限问题，不能拿任一子应用作为主应用入口，然后也方便开发和维护。
2. 整合后系统登录方式：使用单点登录还是什么方式，这个需要根据自己的项目情况和项目需求决定。不做统一登录的话，整合起来后各个子系统还需要各自登录。
3. 整合后服务器端部署方案：整合前可能几个项目部署在不同服务器，整合后需要考虑是不是放在同一台服务器。
4. 路由的history模式最好统一：本文几个子系统的history模式统一使用的history。

整合前主要是考虑和准备好这几点，可以在整合过程中少走弯路。这每一点又涉及到很多细节，需要在整合开发的过程去解决，比如子应用跟主应用的通信、构建打包等问题，需要看官方文档，然后根据自己项目现状去修改调整。

整合前后的变化

整合过程需要处理的疑难问题

把网上qiankun配置好的demo下载下来运行起来，感觉比较简单比较好配置，但是在现有项目上修改配置会发现完全不一样。以下是一些需要注意的事项：

1. vite配置修改：应该是这些配置工作里最麻烦最需要仔细的，vite的qiankun全局变量名跟webpack的是不一样的。
2. 路由配置修改：现有项目的路由守卫里面涉及到重定向页面的，在调通qiankun前可以暂时注释掉，不然会造成主应用页面白屏，子系统页面加载不出来。
3. 生命周期：按照qiankun官网的文档，给每个子应用添加生命周期，记得要销毁。
4. 应用通信：主应用登录完下发token给子应用，子应用超时需要通知主应用，以及子应用加载完成通知主应用等等，都需要主应用和子应用通信，按照官网文档使用。
5. 碰到问题可以多看看官网的 常见问题 ，部署相关多看入门教程，不少问题最终都是根据官网文档解决的。

Vite2+Vue3主应用配置要点

main.js里的配置基本上按照官网文档来就好：

import { initGlobalState } from 'qiankun'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { registerMicroApps, start } from 'qiankun'

const initialState = {
    // 这里可以写初始化数据
    project_id: '项目5',
    token: storage.get(ACCESS_TOKEN)||'',
    spinning: false
}
const actions = initGlobalState(initialState) //初始化state

// 监听actions全局公共状态数据的变化
actions.onGlobalStateChange((state, prevState) => {
    console.log("主应用变更前：", prevState);
    console.log("主应用变更后：", state);
})

function loader(loading) {
  console.log('loading',loading)
  if(loading){
    actions.setGlobalState({ spinning: loading });
  }
}

registerMicroApps([
  {
    name: 'app-aaa', // 与子应用打包配置里的一致
    entry: import.meta.env.DEV ? '//localhost:7100' : '/subapp/aaa/', //本地开发是localhost，部署到测试和生产环境是用后面的
    container: '#appContainer',
    activeRule: '/app-aaa',
    props: { actions },   //向子应用传递创建的全局状态
    loader
  },
  {
    name: 'app-bbb', // 与子应用打包配置里的一致
    entry: import.meta.env.DEV ? '//localhost:7200' : '/subapp/bbb/', //本地开发是localhost，部署到测试和生产环境是用后面的
    container: '#appContainer',
    activeRule: '/app-bbb',
    props: { actions },   //向子应用传递创建的全局状态
    loader
  }
])

start()

主应用配置要点：

1. 在主应用里初始化应用和初始化通信；
2. 测试环境entry名字，不能和activeRule一样，否则主应用页面刷新就变成微应用，官网有强调；
3. 测试环境entry名字，是跟子应用构建里面的publicPath或者assetsPublicPath一致的，这里划重点；
4. activeRule就是浏览器地址栏里的后半截路径；
5. 如果主应用是vite2+vue3应用，vite配置文件不需要额外加output那些打包成umd的配置，不需要，加了打包会报错；
6. 要把所有子应用里的proxy接口代理，拷到主应用里面，这样才能在主应用里访问到子应用里的接口。

Vite2+Vue3子应用配置要点

vite.config.ts文件需要增加的内容：

import qiankun from "vite-plugin-qiankun";

export default defineConfig({
  base: "/subapp/aaa/", // 与主应用里面测试环境的entry一致
  headers: {
    // 允许跨域访问
    "Access-Control-Allow-Origin": "*"
  },
  port: 7100, // 与主应用里注册的开发环境entry一致
  output: {
    // 把子应用打包成 umd 库格式
    library: `${name}-[name]`, // 我这里library名字跟package.json里的name不一样，也是可以的
    libraryTarget: "umd", // 重点，子应用要打包成umd格式
    jsonpFunction: `webpackJsonp_${name}`
  },
  plugins: [
    // 增加qiankun插件
    qiankun("app-aaa", { // app-aaa是与主应用main.ts里注册子应用的name一致
      useDevMode: true
    }),
  ]
})

src目录增加public-path.ts文件：

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

路由文件需要修改的内容：

import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

export default createRouter({
  history: createWebHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app-aaa/' : '/subapp/aaa/'
  ),
});

src目录增加action.ts文件：

function emptyAction() {
  // 警告：提示当前使用的是空 Action
  console.warn("Current execute action is empty!");
}

// 我们首先设置一个用于通信的Actions类
class Actions {
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction
  }
  
  // 默认值为空Action
  constructor() {
  }

  // 设置actions
  setActions(actions) {
    console.log(actions)
    this.actions = actions
  }

  // 映射
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args)
  }

  // 映射
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args)
  }
}

const actions = new Actions()
export default actions

main.ts文件需要增加的内容：

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import actions from './action';

let instance: any;
let history: any;

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__?: string;
  }
}

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  // 独立访问时的代码
  instance = createApp(App)
  instance
    .use(router)
    .use(store)
  instance.mount('#subApp')
  // ... ...
} else {
  // 在qiankun内访问
  renderWithQiankun({
    mount(props) {
      history = createWebHistory(
        qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app-aaa' : '/subapp/aaa'
      );
      instance = createApp(App)
      instance
        .use(router)
        .use(store)
      instance.mount(
        (props.container
          ? props.container.querySelector('#subApp')
          : document.getElementById('subApp')) as Element
      )
      if (props) {//子应用接收主应用值
        actions.setActions(props)
        actions.onGlobalStateChange((state) => {
          console.log("我是子应用，我检测到数据了：", state);
          if(!state.token){
              console.log('document.location.hostname', window.location.origin)
          }
        }, true);
      }
    },
    bootstrap() {
      console.log('--bootstrap')
    },
    update() {
      console.log('--update')
    },
    unmount() {
      instance.unmount()
      console.log('--unmount')
      console.log('instance',instance)
      console.log('history',history)

      instance._container.innerHTML = '';
      history.destroy();// 不卸载  router 会导致其他应用路由失败
      instance = null;
    },
  })
}

vite2+vue3子应用配置要点：

1. 安装qiankun；
2. 安装vite-plugin-qiankun；
3. vite.config.ts文件里面增加base、port、headers跨域、output和qiankun插件配置；
4. 注意qiankunWindow.__POWERED_BY_QIANKUN__里的变量名是qiankunWindow，qiankunWindow相当于一个假的window对象，是作为子应用js代码执行时的全局变量，几个文件都用到这个，划重点；
5. main.ts文件里增加判断是否是qiankunWindow.__POWERED_BY_QIANKUN__来分别写独立访问时和qiankun里访问时的代码；
6. main.ts文件里的qiankun访问的代码是放在renderWithQiankun里的mount生命周期里面；
7. 有两处路由相关的修改，在main.ts和路由文件里。
8. 路由文件和vite.config.ts里面的/subapp/aaa/，和主应用main.ts里注册子应用的entry是一致的。

Vue2子应用配置要点

vue.config.js增加的配置：

  devServer: {
    port: 7200, // 与主应用里注册的开发环境entry一致
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/subapp/bbb/', // 增加了判断，生产环境的路径跟主应用里一致
  output: {
    library: `${name}-[name]`,
    libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    jsonpFunction: `webpackJsonp_${name}`
  }

src目录增加public-path.js文件：

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

路由文件需要修改的内容：

export default new Router({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/app-bbb' : '/',
})

src目录增加action.js文件，与上面子应用的一样：

function emptyAction() {
  // 警告：提示当前使用的是空 Action
  console.warn("Current execute action is empty!");
}

// 我们首先设置一个用于通信的Actions类
class Actions {
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction
  }
  
  // 默认值为空Action
  constructor() {
  }

  // 设置actions
  setActions(actions) {
    console.log(actions)
    this.actions = actions
  }

  // 映射
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args)
  }

  // 映射
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args)
  }
}

const actions = new Actions()
export default actions

main.js文件需要增加的内容：

import router from './router'
import store from './store'
import actions from './action'

let instance = null
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#subApp') : '#subApp')
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap () {
  console.log('[vue] vue app bootstraped')
}

export async function mount(props) {
  console.log('receive props', props)
  // Vue.prototype.$qiankun=props
  if (props) { // 子应用接收主应用值
    actions.setActions(props)
    actions.onGlobalStateChange((state) => {
      console.log('我是子应用bbb，我检测到数据了：', state)
    }, true)
  }
  render(props)
}

export async function unmount() {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}

vue2子应用配置要点：

1. 不需要安装什么，整体配置相对比较简单；
2. vue.config.js文件里面修改publicPath配置，如上面代码加上开发环境判断；
3. vue.config.js文件里面在devServer下增加port和headers跨域配置；
4. vue.config.js文件里面在configureWebpack下增加output配置；
5. 注意window.__POWERED_BY_QIANKUN__里的变量名是window。
6. main.js文件里基本按照官网来修改就可以，router可以使用你现有的，然后在路由文件里修改就好。
7. vue.config.js里面的/subapp/bbb/，和主应用main.ts里注册子应用的entry是一致的。
8. 路由文件里面的app-bbb，和主应用main.ts里注册子应用的name是一致的。

部署的nginx配置：

基本上按照官网的配置来的，官网写的很详细了，按官网配置没错。这个配置是主应用跟子应用部署在同一台服务器的配置，适用于测试和生产环境。

server{  
  listen 80;  
  server_name yourdomain.com;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  
  #lijian
  location / {
    root /www/html/app;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /admin111 {
    proxy_pass http://111.111.111.111:8888;
  }

  location /admin222 {
    proxy_pass http://222.222.222.222:8888;
  }

}

...
└── app/                 # 主应用的目录(/www/html/app)
    ├── css/             # 主应用的css文件夹
    ├── js/              # 主应用的js文件夹
    ├── index.html       # 主应用的index.html
    ├── subapp/          # 存放所有子应用的目录
    |     ├── aaa/       # 存放子应用 aaa 的目录
    |     ├── bbb/       # 存放子应用 bbb 的目录
...

nginx配置说明：

1. 这是主应用和子应用都部署在同一台服务器的基本配置，划重点；
2. 注意上面配置，这里只需要配置主应用的目录就好，服务器/www/html/app目录下放主应用的页面文件。
3. 需要在服务器/www/html/app目录下建立subapp目录，subapp目录是与本文上面的保持一致的。
4. 子应用aaa在服务器/www/html/app/subapp下面建立aaa目录，把构建好的页面放进去。
5. 子应用bbb同理，在服务器/www/html/app/subapp下面建立bbb目录，把构建好的页面放进去。
6. 这里的subapp目录，以及subapp下面建立的aaa和bbb两个目录，是跟本文上面主应用和子应用配置里的/subapp/aaa/和/subapp/bbb/一致的，重点重点重点。
7. 之前本地开发要把各个子应用里面配置的代理拷贝到主应用里面去，上到测试或者生产环境则需要nginx里面做转发，如上面配置，ip可以换成域名。

心得和总结

1. 基于vite的vue3应用在本地开发和测试生产都是可以搞定的，不用把vite替换换成webpack（网上见有替换的）。
2. 基于vite的应用需要安装qiankun插件，变量名不一样。
3. 基于vue2的应用接入qiankun相对简单得多。
4. 本地开发和测试生产的entry和publicPath等配置不一样，需要像本文一样做是不是本地开发环境的判断。
5. Vue2项目有的资源路径名是publicPath，有的是assetsPublicPath，根据实际项目来。
6. 整合qiankun最花时间的不是qiankun本身，是各个系统的登录改造，以及不断试错尝试，本文是这样。
7. 碰到问题多看官网的 常见问题 ，部署相关的问题多看入门教程，特别是部署相关的，根据官网文档来没错。
8. 一定要仔细再仔细，耐心再耐心，不断地试错。

以上就是整合qiankun的心得总结，如果有错误和不完善的地方，欢迎指正。

转载说明

原文标题：整合qiankun微前端框架的心得笔记
原文地址：hanhan.pro/using-qiankun-micro-frontends-solution/
原文作者：xiaohan
转载请注明出处

Mac M1以及更新款ARM架构的电脑，安装homebrew、nvm、nodejs简单的方法小记。

1. 安装homebrew

/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"

然后会提示下一步，要在终端执行以下命令：

 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/你的用户名/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"

执行后，就可以顺利安装成功。

2. 安装nvm

brew install nvm

下载完nvm基本上就能顺利安装好了，然后会显示一大段提示内容；

 export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm

把提示中的这段配置代码，粘贴到你的用户目录下.zshrc文件或者.zprofile文件里。

brew reintall nvm

如果没有提示安装成功，可以重新安装一遍。

3. 使用nvm

在终端新开一个窗口或者标签页，然后输入nvm，然后出现nvm选项，就说明nvm可用了。

4. 安装nodejs

nvm i 14.17.0

1. 安装less最新版和less-loader的7.2.0（10.2.0报错）版本：

npm i less -D
npm i less-loader@7.2.0 -D

2. 安装style-resources-loader和vue-cli-plugin-style-resources-loader最新版：

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

3. 在项目根目录的vue.config.js文件（没有则新建）添加以下配置：

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    }
  }
}

4. 可以在项目中使用less了。

<style lang="less">
...
</style>

• Vue: 2
• Vue Cli: 4.5.14
• Electron: 13.6.0
• Nodejs: 14.17.0

项目搭建

1. 创建Vue项目；

vue create vue-project

本文使用的vue2 default，直接安装完成。建议自定义，然后把less安装上去，以便结合antd vue使用。

2. 进入项目目录；

cd vue-project

3. 安装并调用vue-cli-plugin-electron-builder的生成器；

vue add electron-builder

这步需要等待差不多1分钟左右，如果网络不稳定造成electron安装失败，需要重新执行这一步。

4. 安装好依赖，就可以运行项目了；

yarn electron:serve

或

npm run electron:serve

5. 项目打包成桌面端app；

yarn electron:build

或

npm run electron:build

应用配置

开发桌面端应用，关于less、应用标题、打包等配置如下：

安装LESS

如果安装的vue2项目没有引入less，在基于vue cli4的项目里安装less，以及使用antd vue的less版本方法如下：

1. 安装less和less-loader；

npm i less@3.9.0 less-loader@6.1.0

在node14.17.0下使用less-loader6.1.0版本没有问题，使用7以上的版本就报错了。

2. 安装以下依赖：

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

3. 在项目根目录的vue.config.js文件添加如下配置：

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    }
  }
}

说明：global.less文件需要新建或改为你自己的全局less文件名；

4. 现在可以在vue项目里愉快的使用less了，如需引用antd的less继续往下操作；

5. 在项目根目录的babel.config.js文件里的plugins下面添加如下配置：

module.exports = {
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

6. 在项目的main.js里可以像下面这样按需引用antd的组件了，而不是引用整个css文件；

import {
  Badge, Button, Card, Divider, 
} from 'ant-design-vue'

应用标题配置

默认electron开启了边框显示，标题会显示在窗体底部。如果设置了不显示边框则标题不显示。

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].title = "应用名称"
        return args
      })
  }
}

这里设置好就可以了，就不用到index.html里修改了。

Vue读写文件配置

默认在vue里无法读取本地文件，需要在根目录的vue.config.js文件添加如下配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

完整配置文件

babel.config.js配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

vue.config.js配置

const path = require('path')

module.exports = {
  css: {  
    loaderOptions: {
      less: {
        lessOptions:{
          modifyVars: {},
          javascriptEnabled: true,
        }
      }
    }
  },
  chainWebpack: config =>{
    config.plugin('html')
      .tap(args => {
        args[0].title = "应用名称"
        return args
      })
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    },
    electronBuilder: {
      builderOptions: {
        extraResources: {
          from: './public/data',
          to: './data'
        },
        mac: {
          icon: './public/app.png'
        },
        win: {
          icon: './public/app.ico'
        },
        productName: 'build-app-name',
      },
      nodeIntegration: true
    }
  }
}

Electron开发技术点

发送消息

1. 渲染进程(vue端)向主线程(electron端)发送数据：

import { ipcRenderer } from 'electron'

const data = { a: 1 }
ipcRenderer.send('call', data)

发送的数据支持数组或对象格式。

2. 主线程接收渲染进程发过来的数据，并返回数据；

import { ipcMain } from 'electron'

ipcMain.on('call', (event, data) => {
  console.log('data', data)
  // ...
  const replyData = { success: true, message: '收到数据了' }
  event.reply('reply', replyData)
})

3. 渲染进程接收主线程发送数据：

import { ipcRenderer } from 'electron'

ipcRenderer.on('reply', function(event, data) {
  console.log('data', data)
})

reply为上面主线程background.js里定义的事件名。至此3步，就是从渲染进程发送到接收数据的一个过程了。

4. 如果需要从主进程主动向渲染进程发送数据，方式如下：

win.webContents.send('fromElectron', { b: 2 })

这里的win是electron初始化后的窗体。

background.js代码写法

这是项目生成的electron入口文件，默认是多个function同步写法，建议改造成Class的写法，便于后期扩展。

'use strict'

import { app, protocol, BrowserWindow, ipcMain, nativeTheme } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

class ElectronApp {
  constructor() {
    this.mainWindow = null
  }

  init() {
    this.initApp()
    this.bindEvents()
  }
  
  initApp() {
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([
      { scheme: 'app', privileges: { secure: true, standard: true } }
    ])

    // Quit when all windows are closed.
    app.on('window-all-closed', () => {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })

    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) this.createWindow()
    })

    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
        // Install Vue Devtools
        try {
          await installExtension(VUEJS_DEVTOOLS)
        } catch (e) {
          console.error('Vue Devtools failed to install:', e.toString())
        }
      }
      await this.createWindow()
    })

    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === 'win32') {
        process.on('message', (data) => {
          if (data === 'graceful-exit') {
            app.quit()
          }
        })
      } else {
        process.on('SIGTERM', () => {
          app.quit()
        })
      }
    }

  }

  bindEvents() {
    // 切换操作
    ipcMain.on('call', async (event, app, project) => {
      const replyData = { success: true, message: '收到数据了' }
      event.reply('reply', replyData)
    })
  }

  async createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      minWidth: 800,
      minHeight: 600,
      webPreferences: {
        // Use pluginOptions.nodeIntegration, leave this alone
        // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
        nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      },
    })

    win.setMenu(null)

    if (process.env.WEBPACK_DEV_SERVER_URL) {
      // Load the url of the dev server if in development mode
      await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
      if (!process.env.IS_TEST) win.webContents.openDevTools()
    } else {
      createProtocol('app')
      // Load the index.html when not in development
      win.loadURL('app://./index.html')
    }

    this.mainWindow = win
  }

}

new ElectronApp().init()

1. 

   使用taro创建脚手架工程，最好选默认，选redux的话还需要修改；

2. 安装DVA相关依赖：

npm i redux react-redux redux-logger redux-thunk dva-core dva-loading

不需要安装@tarojs/redux和@tarojs/redux-h5

3. 安装其他依赖：

npm i

4. 在src/app.tsx同级增加dva.ts：

import Taro from '@tarojs/taro'
import { create } from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'

let app, store, dispatch, registered

function createApp(options?: any) {
  const { models } = options
  // if (process.env.NODE_ENV === 'development') {
  //   options.onAction = [createLogger()]
  // }
  app = create({
    ...options
  })
  app.use(createLoading({}))

  // 适配支付宝小程序
  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }

  if (!global.registered) models.forEach((model) => app.model(model))
  global.registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  
  dispatch = store.dispatch
  app.dispatch = dispatch

  global.store = store

  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}

5. 在src/pages/index目录下，创建model.ts：

export interface HomeModelState {
}

const HomeModel = {
  namespace: 'home',
  state: {
  },
  effects: {
  },
  reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    }
  },
}

export default HomeModel

6. 在src目录下建立models目录，并创建index.ts：

import home from '../pages/index/model'

export default [
  home,
]

建议在src/models下放公用的model文件，其他分别放在页面目录，并在这个入口文件index.ts里导入进来。

7. 修改src目录下的app.tsx：

import { Provider } from 'react-redux'
import dva from './dva'
import models from './models/index'


const dvaApp = dva.createApp({
  initialState: {},
  models: models
});
const store = dvaApp.getStore();

上面是要增加的代码；

...

  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }

...

如上，就在render里的<Index />外包裹Provider就好。

自此，Taro 3的react工程引入Dva完成。
本文适用于Taro 3.x.x，亲测没问题。

Taro3与2安装Dva的区别

1. Taro 3不需要安装@tarojs/redux和@tarojs/redux-h5；
2. Taro 3要从react-redux里引入Provider；

import { Provider } from 'react-redux'

1. 

   创建官方脚手架工程，本文选的默认，没有选redux；

2. 安装DVA相关依赖：

npm i redux @tarojs/redux @tarojs/redux-h5 redux-logger redux-thunk dva-core dva-loading

3. 安装其他依赖：

npm i

4. 在src/app.tsx同级增加dva.ts：

import Taro from '@tarojs/taro'
import { create } from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'

let app, store, dispatch, registered

function createApp(options?: any) {
  const { models } = options
  // if (process.env.NODE_ENV === 'development') {
  //   options.onAction = [createLogger()]
  // }
  app = create({
    ...options
  })
  app.use(createLoading({}))

  // 适配支付宝小程序
  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }

  if (!global.registered) models.forEach((model) => app.model(model))
  global.registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  
  dispatch = store.dispatch
  app.dispatch = dispatch

  global.store = store

  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}

5. 在src/pages/index目录下，创建model.ts：

export interface HomeModelState {
}

const HomeModel = {
  namespace: 'home',
  state: {
  },
  effects: {
  },
  reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    }
  },
}

export default HomeModel

6. 在src目录下建立models目录，并创建index.ts：

import home from '../pages/index/model'

export default [
  home,
]

建议在src/models下放公用的model文件，其他分别放在页面目录，并在这个入口文件index.ts里导入进来。

7. 修改src目录下的app.tsx：

import { Provider } from '@tarojs/redux'
import dva from './dva'
import models from './models/index'


const dvaApp = dva.createApp({
  initialState: {},
  models: models
});
const store = dvaApp.getStore();

上面是要增加的代码；

...

  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }

...

如上，就在render里的<Index />外包裹Provider就好。

自此，Taro 2的工程引入Dva完成。
本文适用于Taro 1.x.x 和 2.x.x，亲测没问题。

• 简单模块目录：在 views 目录下建立目录，并在目录下建立页面文件；
• 复杂模块目录：在 页面目录下增加 components 子目录；

  ├── src
      ├── views
            ├── moduleA
                    └── index.vue
            ├── moduleB
                    ├── components
                          ├── a.vue
                          └── b.vue
                    └── index.vue
  

• 

  跨模块的组件目录：
  无需使用公共组件的页面：在页面的同级目录增加 components 目录；

  ├── src
      ├── views
            ├── moduleA
            ├── moduleB
                    └── components
                          ├── a.vue
                          └── b.vue
  

• 需使用公共组件的页面：在页面中直接导入npm组件；

命名规范：

• 目录命名：页面/普通目录命名使用小驼峰，公共组件目录名使用大驼峰；

• 文件命名：使用英文小写，小驼峰方式，例: dashboard, errorPage；

• 特定功能的文件命名：如修改页面 xxxUpdate；

• 原则：能描述清楚目录/文件的作用，若非专业简写词汇，尽量不使用简写。
  该原则同样适用于 CSS、JS 的命名。

HTML规范：

• 引号：在标签属性上使用双引号；
• 空格：缩进使用2个空格；
• 换行：标签属性超过3个须换行；

CSS规范：

• 缩进：使用2个空格；
• 换行：每个属性占一行；
• 分号：每个属性声明结尾都要加分号；
• 媒体查询：尽量靠近规则，不要放底部；
• 命名：
  • 类名使用小写字母并以 - 分隔；
  • id采用小驼峰式命名；
  • less/scss中的变量、函数、混合、placeholder采用小驼峰式命名；
• 需要空格的情况：
  • 多个类名的 , 后及属性名的 : 后；
  • 选择器 > , + , ~ 前后；

    .element > .dialog {
      ...
    }
    
    .dialog {
      color: #f00 !important;
      background-color: rgba(0, 0, 0, .5);
    }
    

• 需要空行的情况：不同的选择器之间需要空一行；

  .dialog {
    color: #f00;
    font-size: 16px;
  
    &:after {
      ...
    }
  }
  

• 需要换行的情况：
  • { 后和 } 前需要换行；
  • 每个属性独占一行；
  • 多个规则的分隔符 , 后；
• 杂项：
  • 属性值 0 后面不要加单位；
  • 尽量少用或不使用 !important；

JS规范：

• 引号：字符使用单引号；
• 缩进：使用2个空格；
• 变量命名：
  • 标准变量命名使用驼峰结构；
  • 常量全大写，用下划线连接；
  • 构造函数，大写第一个字母；
  • 属性行、数组结尾加逗号；
• 函数：
  • 无论是函数声明还是函数表达式，( 前不要空格，但 { 前要有空格；
  • 参数之间用 , 分隔，注意逗号后有一个空格；
  • 匿名函数不要空格；

  doSomething(item);
  
  const doSomething = (a, b, c) => {
    // ...
  };
  

• 对象：属性名不要加引号；
• undefined：使用typeof和字符串 undefined 对变量进行判断；
• 杂项：
  • 对上下文this的引用使用 _this, _self, that其中一个来命名；
  • 括号：if, else, for, while, do, switch, try, catch, finally, with 这些关键字后的小括号前后都有1个空格，且必须有大括号（即使代码块的内容只有一行）
  • 路径：超过2层使用别名 @/ ，不要使用多个 ../
• JSLint:
  • debugger不要出现在提交的代码里；
  • 模板字符串使用 ，而不是 ‘’ 和 + 拼接；
  • 三元运算符有空格，且最多两层结构；
  • 单行注释语句后有且只有一个空格，例： // something
  • 多行注释使用 /** */ ，且加上 @description @params @return 信息；

    /**
      * @description 描述信息
      * @params Object item
      * @return Array data
      */
    

• IDE相关:
  • 使用VS Code；
  • VS Code 须安装的基础插件：ESLint、Vetur、Prettier Code formatter、Vue Peek；

接口规范：

• 业务接口规范：

  {
    "code": 1, //接口状态 1:成功 2:参数错误、系统问题 -1:未登录
    "bizCode": 20001, //业务状态 当code为1时，须有 bizCode、bizMsg
    "bizMsg": "成功",
    "errorCode": 50001, // 错误编码 当code为2时，须有 errorCode、errorMsg
    "errorMsg": "服务端异常, 请稍后再试",
    "data": {
      "integralAmount": "11", 
      "shopCode": "DDDDD",
      "wxShopStatus": 1, 
      "surveyStatus": 1   
    }
  }
  

• code:接口状态 [Int]

• 状态1时，bizCode: 20000, bizMsg: '成功' 号段规则：2号段 eg: 20001

• 状态2时，errorCode: 50001, errorMsg: 'xxxx错误' 号段规则：5号段 服务端错误 eg:50001、 6号段 参数错误 eg:60001

• 状态-1时，除字段code外皆不返回

• bizCode,bizMsg 与 errorCode、errorMsg 是互斥的

• code、bizCode、errorCode 必须为Int型

• 【编号全局统一】

• 举例：

• 20000 成功

• 20001 优惠券已领完

• 20002 积分不足

• 20003 已经领取过了

• 50001 服务端异常, 请稍后再试

• 50002 服务端异常，问题xxx

• 60001 参数错误

• 无分页的数据结构，直接列出属性和值：

  "data": {
    "title": "标题",
    "content": "内容",
  }
  

• 有分页的数据结构，data里有list和pagination属性，分别是列表和分页数据：

  "data": {
    "list": [
        {"id": 1, "title": "1"},
        {"id": 2, "title": "2"}
   ],
    "pagination": {
        "total": 300,
        "current": 1,
        "pageSize": 20,
    }
  }
  

• YApi相关：

  • 添加的字段要有备注；
  • 后端开发完接口后，需将接口状态更新为“已完成”，前端切换到完成的接口；

• 接口中的数据字段：

• 后端须按前端实际需要的字段给，不要给一些多余的字段；

• 前端先行的情况下，前端提供汉字版数据结构定义；

• 接口中的数据格式化、计算等操作需后端处理好，前端不处；考虑到多端的情况；
  原则：前端只做数据渲染，不处理数据；

• 权限和会话超时（失效）：

  • 默认超时时间30分钟；
  • 后端返回的接口带有超时的编码和信息；
  • 前端弹出超时的提示，点击后跳转到登录页；

• 登录：

  • 前端向后端提交登录需要的数据字段；
  • 后端将用户名等信息写入到session里；
  • 前端通过cookie获取到用户名信息；

• 跨域处理：

  • 后端需要在Nginx服务器配置跨域，需要按域名设置，不要设置为*；

    Access-Control-Allow-Origin: http://dev.yougou.com
    Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
    

  • 允许前端携带Cookie请求：

    Access-Control-Allow-Credentials: true
    

国际化：

• 项目工程中的多语言：
  • 使用i18N组件；
  • 不同的语言使用对应的语言文件；
• 组件中的多语言：
  • 语言标识使用系统里传过来的语言；
  • 每个组件使用到的语言，按语言建立文件放在每个组件里；
• 语言包中的数据结构按照功能或页面名称来定义；

上下游协作规范：

• 前端与产品及UI设计师的交互：
  • 前端按照UI设计师提供的 sketch 或 ps 文件进行开发；
• 前端与后端开发协作：
  • 前端在完成界面布局交互开发后，再给到后端进行开发；

安装php环境的教程网上比较多就略过了，也可以使用mamp之类的套件。

安装Composer：

1. 按顺序依次执行以下四个命令：

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

2. 将Composer设为全局：

mv composer.phar /usr/local/bin/composer

Yii2高级版安装：

1. 执行：

composer create-project --prefer-dist yiisoft/yii2-app-advanced yii2-advanced

2. 初始化：

php init

3. 分别打开前后台网址运行：

http://localhost:8888/yii2-advanced/frontend/web/
http://localhost:8888/yii2-advanced/backend/web/

数据库配置：

1. 进入phpmyadmin，创建数据表yii2advanced。
2. 打开common/config/main-local.php，添加数据库端口及修改账号密码。
3. 执行数据迁移命令：

php yii migrate

以下是基于grpc 1.19.0版本和electron 4.0.3版本，亲测是确定好用的。

安装electron特定版本和grpc的步骤：

1. windows下的nrmpc文件参考：

prefix=D:\nodejs\node_modules\npm
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

第一行是将目录指向自定义的nodejs安装目录，如果不是安装在默认的C盘目录下。

2. 在electron项目目录下，安装Electron的4.0.3版本。

npm i electron@4.0.3 -g

3. 在electron项目目录下，安装grpc的1.19.0版本。

npm install grpc@1.19.0 --runtime=electron --target=4.0.3

经过以上几个步骤，然后在electron项目执行npm i安装其他依赖后，项目应该就可以运行。

如果还运行不起来，可以尝试以下2个方法：

1. 如果编译失败可尝试：

.\node_modules\.bin\electron-rebuild

使用electron-rebuild重新编译。

2. windwos配置：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

grpc的1.19.0版本在electron的4.0.3版本下是确定好用的。

新版本的grpc和electron版本还没试过，不过大家可以参考这2个。

> Version 1.23.0 is now out with Electron 6 support. Please try that version.
>>I'm sorry, Electron 6 support got broken in grpc 1.24.0. But it is fixed in grpc 1.24.1

出自Electron v6 and gRPC error #989

安装electron特定版本和grpc的步骤：

以下基于grpc 1.19.0版本和electron 4.0.3版本，这是确定好用的。

1. mac下的.nrmpc文件参考：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

如果当前用户的根目录下没有.npmrc文件，就新建一个并写入这些内容。

2. 在electron项目目录下，安装Electron的4.0.3版本。

npm i electron@4.0.3

3. 在electron项目目录下，安装grpc的1.19.0版本。

npm install grpc@1.19.0 --runtime=electron --target=4.0.3

经过以上几个步骤，然后在electron项目执行npm i安装其他依赖后，项目应该就可以运行。

如果还运行不起来，可以尝试以下2个方法：

1. 如果编译失败可尝试：

./node_modules/.bin/electron-rebuild

使用electron-rebuild重新编译。

2. 如果提示了npm rebuild错误：

npm rebuild

直接执行npm rebuild编译。

1. 后端需给出固定的路径，比如/xxapi；

2. 后端返回的基本数据结构：

data: null,
success: true,
message: "请求成功",

默认的数据结构应该至少有这3个属性，如果没有数据则 data 为 null ；success属性是方便前端判断响应结果是否为成功的状态，比如登录页需要响应给前端的错误信息有很多种，而前端首先需要知道是成功还是失败来进行逻辑编码；如果失败，前端可直接将message显示给用户。

3. 后端返回的列表页数据结构：

data: {
    list: [
        {id:1, title: "1"},
        {id:2, title: "2"},
        ...
    ],
    pagination: {
        total: 300,
        current: 1,
    }
},
success: true,
message: "请求成功",

total为记录总数，current为当前第几页，默认显示数前后端应商定好，比如20条，写到各自工程的配置参数。

4. 后端返回的详情页数据结构：

data: {
    title: "标题",
    content: "内容",
    ...
},
success: true,
message: "请求成功",

5. 前端提交的新建／修改页数据结构：

title: "标题",
content: "内容",
...

6. 后端返回的基础（单个）柱图、饼图、折线图的图表数据结构：

data:[
    {"x":"广东省","y":76011802.16},
    {"x":"江苏省","y":40717628.60},
    ...
],
success: true,
message: "请求成功",

7. 后端返回的多条折线图的图表数据结构：

data:[
    {"x":"广东省","y":76011802.16, type:"阿迪达斯"},
    {"x":"江苏省","y":40717628.60, type:"耐克"},
    ...
],
success: true,
message: "请求成功",

后面多一个type属性，具体以实际图表类型和结构为准。

常见接口报错及解决方案：

在前端页面访问后端接口的时候，如果后端或服务器端未做一些设置，会造成页面访问接口失败，在浏览器的控制台会显示报错信息。本文针对一些常见的错误，列出了解决方案。

1. 不同端口或不同的域名产生的跨域问题，错误如下：

Failed to load ... : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://...' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

出现这个错误是因为前端页面跟后端接口在不同的端口或IP或域名下面，也就是跨域。关于跨域你可能需要详细了解 跨域资源共享 CORS。跨域产生的原因是浏览器遵循的基本安全策略 - MDN web docs[浏览器的同源策略]。

解决方案：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS

如果后端是Java项目，一般是在开发环境服务器的nginx配置文件中添加上面几项来统一配置，而不是在后端代码里配置。添加完后重启nginx，然后在浏览器的响应头里应该可以看到刚才配置的几项，说明配置成功。这里Access-Control-Allow-Origin设置为*表示允许所有的域，也可以根据具体的环境来设置具体的IP或域名。

2. 请求头类型的错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这个错误当前请求Content-Type的值不被支持。可能前端发送的请求头类型有application/json，这个请求涉及到预检请求，可参看 HTTP访问控制（CORS）。

解决方案：

Access-Control-Allow-Headers: Content-Type,*

nginx配置文件中添加这项配置，表示接收前端的Content-Type。

3. 携带cookie设置产生的问题，错误如下：

Failed to load ... : Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://...' is therefore not allowed access.

出现这个错误是因为前端请求接口的时候在请求头里加了credentials: 'include'参数携带cookie信息，而后端未做接收cookie的设置。

解决方案：

Access-Control-Allow-Credentials: true

nginx配置文件中添加这项配置，表示接收前端携带的cookie信息。只有前后端都设置，跨域携带cookie请求才能成功。详细的了解可参看 MDN web docs [Access-Control-Allow-Credentials]

自定义响应头解决方案：

在独立的前端工程中，用户访问到的虽然是静态页面，而实际上现在的前端页面已经有了自己的路由、权限控制等等。

在独立的前端工程工程中同样会碰到一个问题：前端页面如何比较好的获取用户超时状态来退出登录？本文介绍使用自定义响应头字段来解决这个问题。

1. 后端在响应头里增加属性，例如：

x-session-expired: 1

后端代码通过增加x-session-expired为1来告诉前端当前用户超时了。然后在浏览器的响应里应该能看到上面这个配置。但是前端在跨域请求情况下默认只能获取到响应头里的Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma6个基本字段，如果要获取到刚增加的x-session-expired字段，需要进行下一步。

2. 后端增加以下配置：

Access-Control-Expose-Headers: x-session-expired

该配置的作用是指定哪些首部可以作为响应的一部分暴露给外部，这样前端才能获取到上面一步添加的x-session-expired字段及其值。

3. 前端在 fetch 请求的时候获取自定义响应头字段：

return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => {
      const { dispatch } = store;
      const { headers } = response;
      if (headers && headers.has('x-session-expired')) {
        // 如果有响应头里有x-session-expired则退出
        dispatch({
          type: 'login/logout',
        });
        return;
      }
      return response.json();
    })
    .catch((e) => {
        ...
    });

可以看到上面代码的headers.has('x-session-expired')，前端通过has方法来获取响应头里是否有x-session-expired字段，来判断是退出还是解析数据。

至此，后端设置自定义响应头字段且前端获取该字段的问题解决了。该方法也同样适用于添加其他的响应头字段，解决无权限或其他问题。

疑问：可能有同学会提出：超时情况下，后端返回不同的json数据来告诉前端用户超时不行吗？

• 超时或者无权限的情况下，后端应该是给前端响应不同的状态码的，比如401无权限、403访问被禁止。但是如果此时还要给前端响应数据，按照规范就是要返回200的状态码，所以这样肯定是不好的。
• 从上面第三步的前端代码可以看出，如果响应头有那个超时的字段x-session-expired字段就直接退出登录，不进行解析响应的数据了。在响应头没有那个字段的情况下，才去解析响应的数据。如果前端要对响应的数据进行判断，还需要增加额外的代码去解析响应的数据，并额外增加逻辑代码进行状态判断，这样有的错误在代码逻辑里判断，有的错误通过状态码判断显然是不好的。应该把错误统一放到响应的状态码来处理会更好一些。

知识要点：

关于简单请求和非简单请求、以及预检请求等概念，建议看下面列出的前2篇详细了解一下。关于浏览器的同源策略等，可以看第3篇详细了解。

• HTTP访问控制（CORS）
• 跨域资源共享 CORS 详解
• 浏览器的同源策略
• Access-Control-Allow-Credentials

• 需要在自己的服务器搭建git服务；
• 简单方便地安装git服务；
• 只需使用基本的git服务；

关于gogs的详细介绍可参看官方简介。

安装步骤

本文介绍最简单的二进制安装方式，且前提是已经安装Linux和Mysql的情况下。简单来说就是上传压缩包和解压，然后启动gogs服务进行一些配置就可以了，具体如下：

1. 在gogs官网下载 64位TAR.GZ压缩包 ，并上传到服务器的 /home （或者其他）目录下；

2. 在终端进入到服务器的 /home 目录下，运行以下命令解压刚上传的文件（或ftp工具解压也可以）；

tar zxf gogs_0.11.53_linux_amd64.tar.gz

3. 在终端进入解压后的目录例如/home/gogs，并执行./gogs web命令来运行gogs服务；

cd /home/gogs
./gogs web

gogs默认使用3000的端口，如果被占用则执行./gogs web -port 3001。

4. 浏览器输入http://yourip:3000/install来安装gogs(端口3000为实际使用的端口，install为默认安装页面的路径)，在安装页面需要填写数据库、gogs相关配置，以mysql为例：

• 为gogs添加mysql数据库；
• 配置mysql；
• 配置gogs相关信息；
• 配置其他信息；

完成以上配置并提交成功后，gogs就可以运行起来了。

5. 在刚安装的gogs路径下，找到/home/gogs/scripts/systemd/gogs.service 这个systemd服务模版文件复制一份或下到本地；

注：此文件为Systemd服务模板文件，通过修改该文件来配置守护进程，以让gogs后台运行，因为./gogs web方式如果关闭终端，gogs服务就停了；

6. 修改gogs.service文件，需要修改里面的 User、Group、WorkingDirectory、ExecStart 和 Environment 为相对应的值。其中 WorkingDirectory 为 gogs 实际安装路径根目录。

User=root
Group=root
Environment=USER=root HOME=/home/git

注：需要注意配置用户和群组，配置错误会导致服务启动失败。本文使用的User和Group都是root，建议单独创建一个git用户。

7. 将修改好的gogs.service文件上传到/etc/systemd/system下，并执行以下命令来激活gogs。

sudo systemctl enable gogs

8. 执行以下命令来后台启动gogs，如果启动成功则gogs安装完成。

sudo systemctl start gogs

如果刚才已经执行./gogs web启动了，先退出再执行本步骤。

gogs配置

安装完gogs后，在安装目录下会多出来一个文件，本文的路径是/home/gogs/custom/conf/app.ini，通过修改该文件可以自定义配置。

域名绑定

1. 参照以下配置nginx并重启；

server {
    listen 80;
    server_name git.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
    }
}

2. 修改/home/gogs/custom/conf/app.ini里[server]下面的ROOT_URL为上面nginx配置的域名，并重`gogs服务就可以了；

自动部署

通过git的钩子(hook)来实现：提交代码后，直接将代码更新到你的nginx目录，以达到自动部署。

1. 在gogs网站上创建一个仓库，例如创建好的地址是http://git.yoursite.com/user/blog.git；

2. 打开终端并执行以下命令来进入刚创建的仓库的hooks目录下，然后找到post-update.sample文件，并复制一份到相同目录下，将其改名为post-update。

cd /home/gogs-repositories/user/blog.git/hooks

/home/gogs-repositories目录为/home/gogs/custom/conf/app.ini里[repository]的ROOT配置，也就是gogs仓库的根目录。

3. 修改post-update文件为如下并保存；

#!/bin/sh

unset GIT_DIR
DeployPath=/www/wwwroot/blog/  #此目录为服务器页面目录
cd $DeployPath
git init
git remote add origin /home/gogs-repositories/user/blog.git
git clean -df
git pull origin master

以上的几行命令的意思是待git更新完成后，就进入nginx的blog应用目录下，然后清空该目录并拉取最新的代码。

4. 终端执行以下命令为post-update文件设置执行权限；

chmod +x post-update

5. 修改blog.git仓库下的任意文件并提交代码，然后检查nginx目录下的文件，应该会更新成功，则自动部署成功。

6. hexo的自动部署需修改hexo根目录下_config.yml文件里的deploy部分；

deploy:
  type: git
  repo: http://git.yoursite.com/user/blog.git
  branch: master

修改repo和branch就可以了，一定要注意修改branch为你的正确的branch，然后执行hexo d应该会自动部署到刚才设置的nginx目录下了。

官方常见问题

https://gogs.io/docs/intro/faqs

常用gogs命令

停止gogs:

sudo systemctl stop gogs

启动gogs:

sudo systemctl start gogs

检查gogs运行状态:

sudo systemctl status gogs -l

网上也有不少类似的文章，但有的过于简单甚至有误，不太适合新手。通过参看多篇文章，并基于使用Docker部署egg.js应用的实践经验整理出了本文。

1：Docker的前端应用场景是什么？

每个node.js应用需要放在一个独立的环境Docker容器内运行，相互隔离，互不影响。

2：Docker部署node.js应用的优点是什么？

使用Docker容器部署node.js快速方便，特别是应用较多时部署迁移等使用Docker会更方便。

3：为什么要使用Docker部署eggjs应用？

在同一台服务器上不能同时运行多个eggjs应用，除非停止另外一个eggjs应用。

4：使用Docker部署node.js应用，大体的流程是什么样的？

1. 服务器安装好Docker
2. 本地应用根目录编写好Dockfile文件
3. 将整个应用一起上传到服务器目录下
4. 使用终端连接服务器执行命令安装Docker
5. 部署成功

具体的操作请看下文。

服务器安装Docker

如果要使用Docker，需使用Centos 7.x版本。Docker对内核要求比较高，要在Centos6.5及更高的版本的64位系统里安装，网上说6.x使用Docker会有不稳定情况。本文安装docker ce版本。

1. 安装一些系统依赖:

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

2. 添加软件源，这里使用阿里的源，更快更稳定:

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3. 更新 yum 软件源缓存，并安装 docker-ce:

sudo yum makecache fast
sudo yum install docker-ce

4. 启动docker-ce:

sudo systemctl enable docker
sudo systemctl start docker

5. 查看Docker版本：

docker -v

本人在Centos 7.2上安装的Docker版本为18.05.0-ce。

关于docker的使用等可查看 非官方docker中文版文档。

部署node.js应用到服务器

1. egg.js应用需要修改根目录下的package.json（普通node.js应用可忽略这一步）：将start这行里命令里的 --daemon去掉，即启动eggjs使用egg-scripts start就好了。在Docker里eggjs应用要在前台运行。

2. 在本地应用的根目录下(package.json所在目录)新建一个名为Dockerfile的文件（无后缀），将以下内容复制到文件里，并将/usr/src/node-app/koa-server全部替换为你想设置的路径（该路径为docker容器里的路径，可自行设置）：

# 设置基础镜像,如果本地没有该镜像，会从Docker.io服务器pull镜像
FROM node:8.6.0-alpine

# 设置时区
RUN apk --update add tzdata \
    && cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone \
    && apk del tzdata

# 创建app目录
RUN mkdir -p /usr/src/node-app/koa-server

# 设置工作目录
WORKDIR /usr/src/node-app/koa-server

# 拷贝package.json文件到工作目录
# !!重要：package.json需要单独添加。
# Docker在构建镜像的时候，是一层一层构建的，仅当这一层有变化时，重新构建对应的层。
# 如果package.json和源代码一起添加到镜像，则每次修改源码都需要重新安装npm模块，这样木有必要。
# 所以，正确的顺序是: 添加package.json；安装npm模块；添加源代码。
COPY package.json /usr/src/node-app/koa-server/package.json

# 安装npm依赖(使用淘宝的镜像源)
# 如果使用的境外服务器，无需使用淘宝的镜像源，即改为`RUN npm i`。
RUN npm i --registry=https://registry.npm.taobao.org

# 拷贝所有源代码到工作目录
COPY . /usr/src/node-app/koa-server

# 暴露容器端口
EXPOSE 9002

# 启动node应用
CMD npm start

上面的注释一目了然。整个过程简单描述就是：1.拉取docker镜像（并设置时区等）；2.创建docker工作目录，并将package.json拷贝到docker里；3.安装npm依赖；4.将服务器上的应用拷贝到docker里；5.暴露docker容器的端口，然后启动node应用。

3. 使用ftp工具或git工具将整个应用上传到生产环境服务器，并使用终端连接到服务器，进入到服务器应用的目录下；（过程略）

4. 执行以下命令，安装docker镜像；

sudo docker build -t node/koa-server .

-t是对该镜像进行tag标识，标识的名字为node/koa-server，可以自定义这个名字。镜像的构建过程依赖于网速，整体还比较快。npm依赖可能会久一些，因为egg.js的依赖比较多。如果所有步骤执行完，会有success的提示，安装成功了。

5. 执行以下命令，使用刚创建好的镜像来启动一个容器；

# 普通node.js应用
sudo docker run -d --name koa-server -p 9002:9002 node/koa-server

-d为后台运行容器。如果普通node.js应用使用以上命令，容器使用9002端口，与Dockerfile里面的一致。

# eggjs应用
sudo docker run -d --net=host --name koa-server node/koa-server

eggjs应用需要执行以上命令，即增加了 --net=host，该参数表示使用host网络模式与主机共享网络来连接mysql数据库；(暂时使用这种模式成功了，后续研究其他更好方案)。

6. 执行以下命令查看容器是否启动成功；

docker ps

以上命令是查看运行中的容器。如果刚才启动成功，则会显示出来。

curl -i localhost:9002

也可以通过curl命令或者到浏览器里输入应用的访问地址，来查看能否访问应用，如果可以则安装成功。

docker logs containerId

如果刚才执行docker ps没有看到刚刚启动的容器，说明启动失败，使用该命令来查看启动的具体情况。

7. docker容器里eggjs连接mysql：

只需要根据情况修改数据库相关信息即可，在host网络模式下，容器里eggjs的mysql配置文件里的host仍可设置为localhost。

更新docker里的node.js应用

1. 通过查看容器列表，找到需要停止的容器ID；

docker ps

2. 停止容器；

sudo docker stop containerId

3. 删除容器；

sudo docker rm containerId

4. 删除镜像；

# 正常情况可以删除
sudo docker rmi imageId
# 提示无法删除情况下，强制删除
sudo docker rmi -f imageId

5. 将本地应用代码更新到服务器目录下。

6. 按照上面的步骤重新构建镜像和启动容器。

重点总结

1. 使用Centos 7.x版本安装docker。
2. --daemon要去掉，让eggjs应用直接前台运行。
3. Dockerfile里先拷贝package.json，安装npm依赖后，再拷贝应用的代码。
4. 使用境外服务器则不需要使用淘宝的npm镜像源。

可能出现的问题

1. npm安装失败：可能是镜像源的问题，需要删除镜像重新构建镜像。
2. 镜像无法删除：需要先停止和删除容器。

其他常用命令

镜像相关：

查看镜像构建工程

sudo docker history node/koa-server

比如上面我们构建node/koa-server这个镜像后，可以通过这个命令来查看该镜像的构建过程，来发现问题。

查看所有镜像列表

docker images

删除镜像

sudo docker rmi imageId
sudo docker rmi -f imageId

先查看镜像列表，找到要删除的镜像ID，然后使用该命令删除。-f为强制删除。

容器相关：

查看所有容器列表

docker ps

查看某个容器的信息

docker logs containerId

先查看容器列表，找到要查看容器的ID，然后使用该命令查看。

拷贝主机的文件到容器的目录下

docker cp src/. mycontainer:/target

src为要拷贝的目录名，mycontainer为容器的id，target为目标目录名。

进入某个容器的环境

sudo docker exec -it containerId /bin/sh

先查看容器列表，找到要查看容器的ID，然后使用该命令查看。/bin/sh可在执行docker ps后看到。退出容器可以执行exit;。