你见过用命令行写的简历吗？ - DongSuo's Blog
BLOG
MY WORKS
ABOUT

你见过用命令行写的简历吗？

作为一名程序员，还是有一份有特色的在线简历会比较好吧…… 在线简历很容易做得很丑哎…… 套模板这种事情有点丢人呀…… 那……干嘛不用程序员最熟悉的命令行来写简历呢？ 啊咧？！
国际惯例： https://github.com/dongsuo/vue-terminal-emulator
notion image
上图就是一个用vuejs在浏览器中模拟出来的终端界面，用这个来做一份简历还是有点小酷吧？(在线体验：[https://dongsuo.github.io/terminal-resume-template/][1]，源码：https://github.com/dongsuo/vue-terminal-emulator)
OK，闲话少叙，来动手做一个吧。
首先，你需要把这个项目(https://github.com/dongsuo/vue-terminal-emulator) fork到你自己的Github目录下，然后pull到本地。（如果你不明白这一步的话，以下是你可以在谷歌或者百度输入框输入的关键词：git,github,仓库，repository,本地仓库。所有关键词可以随意组配，直到你明白这一步为止，下同。）
然后，在你本地的命令行工具中，进入本地项目目录，执行 npm install，等任务跑完,执行 npm run dev就可以了，你的默认浏览器会自动打开 http://localhost:8080 这个地址。（关键词：nodejs, npm, 淘宝镜像，node_modules目录）
接下来就是实质性的工作了，由于vue-terminal-emulator还没有文档，所以这篇短文就算是文档了，我会写得尽量详细一些。 ### 目录结构 按照惯例，先从目录结构开始吧：
基本结构就是vue-cli项目的默认结构，主要src目录下的文件需要介绍一下： components下是 VueTerminalEmulator 组件，主要的逻辑和样式都封装在这个文件中，你可以完全不管这个文件。 ### 核心配置文件 我们主要需要配置的文件是 plugins/commadnList.js 和 plugins/taskList.js 这两个文件，这两个文件的基本结构是一致的，都 export一个对象，对象key是任务或者命令名称，值是由 description 和 messages/task 组成的对象，基本的结构如下所示：
VueTerminalEmulator 组件会import这两个文件，根据其中的配置生成帮助项并执行相应的指令，其中description即为’help’指令中各个命令的帮助信息。
其中，commandList 中存放静态的指令，指令执行之后，直接列出所有 message，然后指令结束，无需等待。而taskList 中是异步的任务，指令执行后组件会进入loading状态，任务完成后，通过resolve一个消息来通知VueTerminalEmulator 组件任务结束，解除loading状态（关键词：异步、promise、resolve）。以下是这两种命令的例子： 异步任务：
notion image
help是典型的静态指令：
notion image
#### 静态指令 commandList 中的核心是messages数组，数组内是多个message对象，执行command时，会将command中的message显示在Terminal窗口中，比较简单，不多说，一个示例就解决了：
就是这么简单，不需要更多的语言。 #### 异步任务 taskList 的核心是名称与任务名一致的函数，该函数接受两个参数：一个函数(pushToList)和命令行(input)的输入值。你可以根据input值来执行具体的任务，然后将message作为参数调用pushToList().当任务结束时，需要返回一个promise，promise要resolve一个message对象通知组件任务结束，如有需要，也可以reject一个message对象通知组件任务出错，示例代码：
好了，核心内容就是这么多，下面介绍一下上文中提到多次的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. https://github.com/dongsuo/vue-terminal-emulator [1]: https://dongsuo.github.io/terminal-resume-template/
-- The End --