摘要：異步任務(wù)的核心是名稱(chēng)與任務(wù)名一致的函數(shù)，該函數(shù)接受兩個(gè)參數(shù)一個(gè)函數(shù)和命令行的輸入值。

作為一名程序員，還是有一份有特色的在線簡(jiǎn)歷會(huì)比較好吧……
在線簡(jiǎn)歷很容易做得很丑哎……
套模板這種事情有點(diǎn)丟人呀……
那……干嘛不用程序員最熟悉的命令行來(lái)寫(xiě)簡(jiǎn)歷呢？
啊咧？！

上圖就是一個(gè)用vuejs在瀏覽器中模擬出來(lái)的終端界面，用這個(gè)來(lái)做一份簡(jiǎn)歷還是有點(diǎn)小酷吧？(在線體驗(yàn)：https://dongsuo.github.io/ter...，源碼：https://github.com/dongsuo/vu...

OK，閑話少敘，來(lái)動(dòng)手做一個(gè)吧。

首先，你需要把這個(gè)項(xiàng)目(https://github.com/dongsuo/vu... fork到你自己的Github目錄下，然后pull到本地。（如果你不明白這一步的話，以下是你可以在谷歌或者百度輸入框輸入的關(guān)鍵詞：git,github,倉(cāng)庫(kù)，repository,本地倉(cāng)庫(kù)。所有關(guān)鍵詞可以隨意組配，直到你明白這一步為止，下同。）

然后，在你本地的命令行工具中，進(jìn)入本地項(xiàng)目目錄，執(zhí)行 npm install，等任務(wù)跑完,執(zhí)行 npm run dev就可以了，你的默認(rèn)瀏覽器會(huì)自動(dòng)打開(kāi) http://localhost:8080 這個(gè)地址。（關(guān)鍵詞：nodejs, npm, 淘寶鏡像，node_modules目錄）

接下來(lái)就是實(shí)質(zhì)性的工作了，由于vue-terminal-emulator還沒(méi)有文檔，所以這篇短文就算是文檔了，我會(huì)寫(xiě)得盡量詳細(xì)一些。

按照慣例，先從目錄結(jié)構(gòu)開(kāi)始吧：

├── build                      // 構(gòu)建相關(guān)  
├── config                     // 配置相關(guān)
├── docs                       // 構(gòu)建輸出目錄
├── src                        // 源代碼
│   ├── components             // 組件
│   ├── plugins                // 插件
│   │   ├── commandList.js     // 命令列表
│   │   └── taskList.js        // 任務(wù)列表
│   ├── App.vue                // 入口頁(yè)面
│   └── main.js                // 入口 加載組件 初始化等
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項(xiàng)
├── .gitignore                 // git 忽略項(xiàng)
├── favicon.ico                // favicon圖標(biāo)
├── index.html                 // html模板
└── package.json               // package.json

基本結(jié)構(gòu)就是vue-cli項(xiàng)目的默認(rèn)結(jié)構(gòu)，主要src目錄下的文件需要介紹一下：
components下是 VueTerminalEmulator 組件，主要的邏輯和樣式都封裝在這個(gè)文件中，你可以完全不管這個(gè)文件。

我們主要需要配置的文件是 plugins/commadnList.js 和 plugins/taskList.js 這兩個(gè)文件，這兩個(gè)文件的基本結(jié)構(gòu)是一致的，都 export一個(gè)對(duì)象，對(duì)象key是任務(wù)或者命令名稱(chēng)，值是由 description 和 messages/task 組成的對(duì)象，基本的結(jié)構(gòu)如下所示：

{
  commandOrTask:{
    description:"",
    messagesOrTask:[]//(function)
    }
}

VueTerminalEmulator 組件會(huì)import這兩個(gè)文件，根據(jù)其中的配置生成幫助項(xiàng)并執(zhí)行相應(yīng)的指令，其中description即為"help"指令中各個(gè)命令的幫助信息。

  // VueTerminalEmulator 中引入配置文件
  import commandList from "./../plugins/commandList"
  import taskList from "./../plugins/taskList"

其中，commandList 中存放靜態(tài)的指令，指令執(zhí)行之后，直接列出所有 message，然后指令結(jié)束，無(wú)需等待。而taskList 中是異步的任務(wù)，指令執(zhí)行后組件會(huì)進(jìn)入loading狀態(tài)，任務(wù)完成后，通過(guò)resolve一個(gè)消息來(lái)通知VueTerminalEmulator 組件任務(wù)結(jié)束，解除loading狀態(tài)（關(guān)鍵詞：異步、promise、resolve）。以下是這兩種命令的例子：
異步任務(wù)：

help是典型的靜態(tài)指令：

commandList 中的核心是messages數(shù)組，數(shù)組內(nèi)是多個(gè)message對(duì)象，執(zhí)行command時(shí)，會(huì)將command中的message顯示在Terminal窗口中，比較簡(jiǎn)單，不多說(shuō)，一個(gè)示例就解決了：

contact: {
    description: "How to contact author",
    messages: [
    { message: "Website: http://xiaofeixu.cn" },
    { message: "Email: xuxiaofei915@gmail.com" },
    { message: "Github: https://github.com/dongsuo" },
    { message: "WeChat Offical Account: dongsuo" }
    ] }

就是這么簡(jiǎn)單，不需要更多的語(yǔ)言。

taskList 的核心是名稱(chēng)與任務(wù)名一致的函數(shù)，該函數(shù)接受兩個(gè)參數(shù)：一個(gè)函數(shù)(pushToList)和命令行(input)的輸入值。你可以根據(jù)input值來(lái)執(zhí)行具體的任務(wù)，然后將message作為參數(shù)調(diào)用pushToList().當(dāng)任務(wù)結(jié)束時(shí)，需要返回一個(gè)promise，promise要resolve一個(gè)message對(duì)象通知組件任務(wù)結(jié)束，如有需要，也可以reject一個(gè)message對(duì)象通知組件任務(wù)出錯(cuò)，示例代碼：

echo: {
    description: "Echoes input, Usage:  echo ",
    //echo將用戶的輸入原封不動(dòng)地返回，顯示在terminal窗口中
    echo(pushToList, input) {
      //解析用戶輸入
      input = input.split(" ")
      input.splice(0, 1)
      const p = new Promise(resolve => {
      // 將message對(duì)象作為參數(shù)調(diào)用pushToList()
        pushToList({ time: generateTime(), label: "Echo", type: "success", message: input.join(" ") });
        // 通過(guò)resolve一個(gè)message對(duì)象通知組件任務(wù)結(jié)束
        resolve({ type: "success", label: "", message: "" })
      })
      // 返回 promise 對(duì)象
      return p
    }
  }

好了，核心內(nèi)容就是這么多，下面介紹一下上文中提到多次的message對(duì)象：

{ 
  time: generateTime(), 
  type: "warning",
  label: "warning",
  message: "This is a Waning Message!" 
}

message對(duì)象目前支持如上四個(gè)字段：

time字段可省略，建議使用提供的 generateTime 方法，也可自己配置；

type可省略，目前支持5個(gè)值：info,warning,success,error,system,分別對(duì)應(yīng)5種顏色，用于label字段的高亮；

label字段可省略，可隨意賦值，但是不建議太長(zhǎng)，影響美觀；

message為必須字段就是純文本內(nèi)容；

當(dāng)你已經(jīng)確認(rèn)簡(jiǎn)歷做好、沒(méi)有bug之后，就可以部署了，首先執(zhí)行npm run build命令，然后把你的代碼push到Github上，點(diǎn)擊settings, 找到Github Pages，將source設(shè)置為docs folder，點(diǎn)擊save就部署成功了。

以上就是做一個(gè)命令行簡(jiǎn)歷所需要知道的全部?jī)?nèi)容了，如果還有小伙伴有問(wèn)題的話，歡迎issue或者pr.
https://github.com/dongsuo/vu...