Вы когда-нибудь видели резюме, написанное из командной строки?

Командная строка Vue.js

Ерунда: Если все понимают "такое резюме в hr отправлять нельзя", просьба не отвечать, спасибо!

Международная практика:GitHub.com/dongsuo/v UE…

текст:

Программисту было бы лучше иметь отличительное онлайн-резюме...
Онлайн-резюме легко сделать уродливым...
Наборы шаблонов такого рода вещи немного стыдно ах......
Итак ... почему бы вам не использовать командную строку, которую программисты наиболее знакомы, чтобы написать резюме?
Хм? !

На картинке выше показан интерфейс терминала, смоделированный vuejs в браузере. Немного круто использовать это для создания резюме? (онлайн опыт:Dongsuo.GitHub.IO/терминал-горячий…, исходный код:GitHub.com/dongsuo/v UE…)

Хорошо, без сплетен, давайте сделаем один.

Во-первых, вам нужно поставить этот предмет (GitHub.com/dongsuo/v UE…) разветвляйтесь в свой собственный каталог Github, а затем извлекайте в локальный. (Если вы не понимаете этот шаг, следующие ключевые слова вы можете ввести в поле ввода Google или Baidu: git, github, склад, репозиторий, локальный склад. Все ключевые слова можно комбинировать по желанию, пока вы не поймете этот шаг, То же самое ниже.)

Затем в локальном инструменте командной строки перейдите в локальный каталог проекта и выполнитеnpm install, дождаться завершения задачи, выполнитьnpm run devВот и все, ваш браузер по умолчанию автоматически откроетсяhttp://localhost:8080Этот адрес. (Ключевые слова: nodejs, npm, зеркало Taobao, каталог 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:
Под компонентами находится компонент VueTerminalEmulator.В этом файле инкапсулирована основная логика и стили.Вы можете полностью игнорировать этот файл.

основной файл конфигурации

Основные файлы, которые нам нужно настроить, это plugins/commadnList.js и plugins/taskList.js. Базовая структура этих двух файлов одинакова. Оба экспортируют объект. Ключ объекта — это имя задачи или команды, а значение определяется Объект, состоящий из описания и сообщений/задачи, имеет следующую базовую структуру:

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

Компонент VueTerminalEmulator импортирует эти два файла, сгенерирует элементы справки в соответствии с их конфигурацией и выполнит соответствующие инструкции, где описание — это справочная информация о каждой команде в инструкции «помощь».

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

Среди них commandList хранит статические команды.После выполнения команды все сообщения выводятся сразу, а затем команда завершается без ожидания. TaskList — это асинхронная задача.После выполнения инструкции компонент перейдет в состояние загрузки.После выполнения задачи он уведомит компонент VueTerminalEmulator об окончании задачи через сообщение разрешения и сбросит состояние загрузки (ключевые слова : асинхронный, обещание, разрешение). Ниже приведены примеры этих двух команд:
Асинхронные задачи:

help — это типичная статическая директива:

статическая директива

Ядром commandList является массив сообщений. В массиве есть несколько объектов сообщений. Когда команда выполняется, сообщение в команде будет отображаться в окне терминала. Это относительно просто. Не так много, чтобы сказать, пример решит это:

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). Вы можете выполнить определенную задачу в соответствии с входным значением, а затем вызвать pushToList (с сообщением в качестве параметра). Когда задача завершается, вам нужно вернуть обещание. Обещание должно разрешить объект сообщения, чтобы уведомить компонент завершение задачи.При необходимости можно также отклонить Объект сообщения уведомляет компонентную задачу об ошибке, пример кода:

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
    }
  }

Что ж, основного контента так много, давайте представим объект сообщения, упомянутый много раз выше:

объект сообщения

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

В настоящее время объект сообщения поддерживает следующие четыре поля:

  • Поле времени можно не указывать, рекомендуется использовать предоставленный метод generateTime, либо настроить его самостоятельно;
  • тип можно не указывать, на данный момент поддерживает 5 значений: информация, предупреждение, успех, ошибка, система, соответствующие 5 цветам соответственно, используемым для выделения поля метки;
  • Поле метки можно не указывать и назначать по желанию, но не рекомендуется делать его слишком длинным, что повлияет на внешний вид;
  • сообщение — это обязательное поле с текстовым содержимым;

    развертывать

    Когда вы убедились, что резюме готово и в нем нет ошибок, вы можете его развернуть.npm run buildкоманду, а затем отправьте свой код на Github, нажмите «Настройки», найдите Github Pages, установите в качестве источника папку docs и нажмите «Сохранить» для успешного развертывания.

That's All

Вышеизложенное - это все, что вам нужно знать, чтобы сделать резюме командной строки.Если у вас есть какие-либо вопросы, вы можете задать или пр.
GitHub.com/dongsuo/v UE…

Категории