作为一名程序员,还是有一份有特色的在线简历会比较好吧……
在线简历很容易做得很丑哎……
套模板这种事情有点丢人呀……
那……干嘛不用程序员最熟悉的命令行来写简历呢?
啊咧?!

国际惯例: https://github.com/dongsuo/vue-terminal-emulator

上图就是一个用vuejs在浏览器中模拟出来的终端界面,用这个来做一份简历还是有点小酷吧?(在线体验:https://dongsuo.github.io/terminal-resume-template/,源码: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还没有文档,所以这篇短文就算是文档了,我会写得尽量详细一些。

目录结构

按照惯例,先从目录结构开始吧:

├── 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’指令中各个命令的帮助信息。

1
2
3
// 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.
https://github.com/dongsuo/vue-terminal-emulator