Nonsense: if it is “can not send hr such resume” and so on we all understand the words, trouble you do not reply, thank you!

International practice:Github.com/dongsuo/vue…

Body:

As a programmer, it’s better to have a distinctive online resume… It’s easy to make an online resume look ugly… This template thing is a bit embarrassing… That…… Why not use the command line that programmers are most familiar with? Ah? !

This is a vuejs simulation of a terminal interface in a browser. Isn’t it a little cool to use this as a resume? (online experience: dongsuo. Making. IO/terminal – re… , source: github.com/dongsuo/vue…)

OK, without further ado, let’s make one.

First, you need to put this project (github.com/dongsuo/vue…) Fork to your own Github directory and pull locally. Git, Github, repository, repository, local repository. All key words can be combined as you like until you understand this step.

Then, in your local command line tool, go to the local project directory, execute NPM install, and when the task is finished, execute NPM run dev. Your default browser will automatically open http://localhost:8080. (Key words: NodeJS, NPM, Taobao mirror, node_modules directory)

The next step is the substantive work. Since vue-terminal-Emulator has not been documented yet, this short article is regarded as a document, and I will try to write it in more detail.

The directory structure

As usual, let’s start with the directory structure:

├─ Build └ ─ config └ ─ docs └ ─ SRC // source │ ├─ Components │ ├─ plugins │ ├ ins ├ ─ ─commandList. Js / / command List │ │ └ ─ ─ taskList, js / / task List │ ├ ─ ─ App. Vue / / entry page │ └ ─ ─ main. Js / / entry loading component initialization ├ ─ ─ the babelrc / / // git Ignore ├─ Favicon. ico // FavIcon Icon ├─ index.html // ├ ─ garbage // package.jsonCopy the code

VueTerminalEmulator components. The main logic and styles are wrapped in this file. You can ignore this file completely.

Core configuration file

The main files we need to configure are plugins/ commadnlist. js and plugins/ tasklist. js. The basic structures of these two files are the same, they both export an object, and the object key is the task or command name. Values are objects composed of description and messages/ Task. The basic structure is as follows:

{
  commandOrTask:{
    description:' ',
    messagesOrTask:[]//(function)}}Copy the code

The VueTerminalEmulator component imports these two files, generates help items and executes instructions based on their configuration, where description is the help information for each command in the ‘help’ directive.

// VueTerminalEmulator introduces the configuration file importcommandList from '. /.. /plugins/commandList'
  import taskList from '. /.. /plugins/taskList'Copy the code

A commandList contains static commands. After the command is executed, all messages are listed directly. Then the command terminates without waiting. The task in taskList is an asynchronous task. After the command is executed, the component will enter loading state. After the task is completed, the Resolve message will notify VueTerminalEmulator that the task is over and the loading state will be lifted. Asynchronous, Promise, resolve). Here are examples of both types of commands: asynchronous task:

Help is a typical static instruction:

Static instructions

A command list contains a number of message objects. A command list contains a number of message objects. A command list contains a number of messages.

contact: {
    description: 'How to contact author',
    messages: [
    { message: 'Website: http://xiaofeixu.cn' },
    { message: 'Email: [email protected]' },
    { message: 'Github: https://github.com/dongsuo' },
    { message: 'WeChat Offical Account: dongsuo'}}]Copy the code

It’s that simple, no more language is needed.

Asynchronous tasks

At the heart of taskList is a function with the same name as the task, which takes two arguments: a function (pushToList) and an input value from the command line (input). You can perform specific tasks based on input values and then call pushToList() with Message as an argument. When the task ends, you need to return a promise. The Promise must resolve a message object to notify the component that the task is over, or reject a message object to notify the component that the task failed, if necessary. Example code:

echo: {
    description: 'Echoes input, Usage: echo 
      
       '
      , / /echoReturn the user's input intact and display it in the Terminal windowecho(pushToList, input) {// Parse user input input = input.split(' ') input.splice(0, 1) const p = new Promise(resolve => {// call pushToList() pushToList({time: generateTime(), label:'Echo'.type: 'success', message: input.join(' ')}); // Resolve a message object to notify the component that the task is finished. Resolve ({type: 'success', label: ' ', message: ' '})}) // Returns a Promise objectreturn p
    }
  }Copy the code

Ok, that’s the core of it, so let’s take a look at the message object mentioned several times above:

The message object

{ 
  time: generateTime(), 
  type: 'warning',
  label: 'warning',
  message: 'This is a Waning Message! ' 
}Copy the code

The message object currently supports the following four fields:

  • Time field can be omitted, it is recommended to use the generateTime method provided, or you can configure your own;
  • Type can be omitted, currently supports five values: info, warning, success, and the error, the system, corresponding to 5 colors, is used to label fields highlighted;
  • The label field can be omitted or assigned at will, but it is not recommended to be too long, which will affect the appearance.
  • Message means the required field is plain text content;

    The deployment of

    Once you’ve confirmed that your resume is ready and bug-free, you can deploy it, firstnpm run buildClick Settings, go to Github Pages, set Source to Docs Folder, and click Save to deploy successfully.

That’s All

That’s all you need to know to make a command line resume. If you have any questions, please feel free to issue or pr. github.com/dongsuo/vue…