你見過用命令列寫的簡歷嗎？

東索發表於2017-11-12
命令列

廢話：如果是“不能給 hr 發這樣的簡歷”之類大家都懂的話，麻煩您就不要回復了，謝謝！

國際慣例： github.com/dongsuo/vue…

正文：

作為一名程式設計師，還是有一份有特色的線上簡歷會比較好吧……
線上簡歷很容易做得很醜哎……
套模板這種事情有點丟人呀……
那……幹嘛不用程式設計師最熟悉的命令列來寫簡歷呢？
啊咧？！

上圖就是一個用vuejs在瀏覽器中模擬出來的終端介面，用這個來做一份簡歷還是有點小酷吧？(線上體驗：dongsuo.github.io/terminal-re…，原始碼：github.com/dongsuo/vue…)

OK，閒話少敘，來動手做一個吧。

首先，你需要把這個專案(github.com/dongsuo/vue…) fork到你自己的Github目錄下，然後pull到本地。（如果你不明白這一步的話，以下是你可以在谷歌或者百度輸入框輸入的關鍵詞：git,github,倉庫，repository,本地倉庫。所有關鍵詞可以隨意組配，直到你明白這一步為止，下同。）

然後，在你本地的命令列工具中，進入本地專案目錄，執行 npm install，等任務跑完,執行 npm run dev就可以了，你的預設瀏覽器會自動開啟 http://localhost:8080 這個地址。（關鍵詞：nodejs, npm, 淘寶映象，node_modules目錄）

接下來就是實質性的工作了，由於vue-terminal-emulator還沒有文件，所以這篇短文就算是文件了，我會寫得儘量詳細一些。

目錄結構

按照慣例，先從目錄結構開始吧：

├── build                      // 構建相關  
├── config                     // 配置相關
├── docs                       // 構建輸出目錄
├── src                        // 原始碼
│   ├── components             // 元件
│   ├── plugins                // 外掛
│   │   ├── commandList.js     // 命令列表
│   │   └── taskList.js        // 任務列表
│   ├── App.vue                // 入口頁面
│   └── main.js                // 入口 載入元件 初始化等
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖示
├── index.html                 // html模板
└── package.json               // package.json複製程式碼

基本結構就是vue-cli專案的預設結構，主要src目錄下的檔案需要介紹一下：
components下是 VueTerminalEmulator 元件，主要的邏輯和樣式都封裝在這個檔案中，你可以完全不管這個檔案。

核心配置檔案

我們主要需要配置的檔案是 plugins/commadnList.js 和 plugins/taskList.js 這兩個檔案，這兩個檔案的基本結構是一致的，都 export一個物件，物件key是任務或者命令名稱，值是由 description 和 messages/task 組成的物件，基本的結構如下所示：

{
  commandOrTask:{
    description:'',
    messagesOrTask:[]//(function)
    }
}複製程式碼

VueTerminalEmulator 元件會import這兩個檔案，根據其中的配置生成幫助項並執行相應的指令，其中description即為'help'指令中各個命令的幫助資訊。

  // VueTerminalEmulator 中引入配置檔案
  import commandList from './../plugins/commandList'
  import taskList from './../plugins/taskList'複製程式碼

其中，commandList 中存放靜態的指令，指令執行之後，直接列出所有 message，然後指令結束，無需等待。而taskList 中是非同步的任務，指令執行後元件會進入loading狀態，任務完成後，通過resolve一個訊息來通知VueTerminalEmulator 元件任務結束，解除loading狀態（關鍵詞：非同步、promise、resolve）。以下是這兩種命令的例子：
非同步任務：

help是典型的靜態指令：

靜態指令

commandList 中的核心是messages陣列，陣列內是多個message物件，執行command時，會將command中的message顯示在Terminal視窗中，比較簡單，不多說，一個示例就解決了：

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' }
    ] }複製程式碼

就是這麼簡單，不需要更多的語言。

非同步任務

taskList 的核心是名稱與任務名一致的函式，該函式接受兩個引數：一個函式(pushToList)和命令列(input)的輸入值。你可以根據input值來執行具體的任務，然後將message作為引數呼叫pushToList().當任務結束時，需要返回一個promise，promise要resolve一個message物件通知元件任務結束，如有需要，也可以reject一個message物件通知元件任務出錯，示例程式碼：

echo: {
    description: 'Echoes input, Usage:  echo <your input>',
    //echo將使用者的輸入原封不動地返回，顯示在terminal視窗中
    echo(pushToList, input) {
      //解析使用者輸入
      input = input.split(' ')
      input.splice(0, 1)
      const p = new Promise(resolve => {
      // 將message物件作為引數呼叫pushToList()
        pushToList({ time: generateTime(), label: 'Echo', type: 'success', message: input.join(' ') });
        // 通過resolve一個message物件通知元件任務結束
        resolve({ type: 'success', label: '', message: '' })
      })
      // 返回 promise 物件
      return p
    }
  }複製程式碼

好了，核心內容就是這麼多，下面介紹一下上文中提到多次的message物件：

message 物件

{ 
  time: generateTime(), 
  type: 'warning',
  label: 'warning',
  message: 'This is a Waning Message!' 
}複製程式碼

message物件目前支援如上四個欄位：

  • time欄位可省略，建議使用提供的 generateTime 方法，也可自己配置；
  • type可省略，目前支援5個值：info,warning,success,error,system,分別對應5種顏色，用於label欄位的高亮；
  • label欄位可省略，可隨意賦值，但是不建議太長，影響美觀；
  • message為必須欄位就是純文字內容；

    部署

    當你已經確認簡歷做好、沒有bug之後，就可以部署了，首先執行npm run build命令，然後把你的程式碼push到Github上，點選settings, 找到Github Pages，將source設定為docs folder，點選save就部署成功了。

That's All

以上就是做一個命令列簡歷所需要知道的全部內容了，如果還有小夥伴有問題的話，歡迎issue或者pr.
github.com/dongsuo/vue…

相關文章