Покращіть робочий процес Vue.js за допомогою Vue CLI 3

Навряд чи ми можемо уявити сучасну веб-розробку без допомоги інструментів інтерфейсу командного рядка (CLI від англ. Command-Line Interface). Вони надзвичайно полегшують та прискорюють процес розробки, зменшуючи кількість повторюваних та нудних завдань. Встановлення проекту вручну, з усіма функціями відстеження, створення, тестування, попередньої обробки, оптимізації та відповідних опцій відстеження, не звучить захоплююче, чи не так?

Ось чому всі сучасні фреймворки (такі як Angular, React тощо) пропонують власну версію інструментів CLI, і Vue.js не є винятком. Але остання третя версія Vue CLI випереджає інших. Тепер він не тільки дуже потужний і гнучкий, але й оснащений повноцінним графічним інтерфейсом. Так, ви розчули правильно. Vue CLI 3 пропонує окремий повний графічний користувальницький інтерфейс.

Тепер за допомогою нового VUE CLI та Vue UI GUI запуск нових проектів Vue.js легший, ніж будь-коли. В цьому уроці ви побачите, як використовувати Vue CLI, і як Vue UI користувальницький зможе ще більше прискорити ваш робочий процес. Давайте розпочнемо!

Що таке Vue CLI?

Vue CLI - це набір інструментів для швидкого створення прототипів, легкого застосування методу скаффолдінгу та ефективного управління проектами. Він складається з трьох головних інструментів:

• CLI - глобально встановлений пакет npm, який забезпечує основну функціональність за допомогою команди vue. Це дозволяє нам легко скласти новий проект (vue create) або просто швидко переробити сирі ідеї (vue serve). Для більш конкретного та візуального контролю над нашими проектами, ми можемо відкрити GUI версію CLI, запустивши команду vue ui.
• CLI Service - це розробка залежностей (бінарний файл vue-cli-service), локально встановлений у кожен проект, створений за допомогою CLI. Це дозволяє нам розробити наш проект (vue-cli-service serve), упакувати його на продакшн (vue-cli-service build), а також перевірити конфігурацію внутрішнього вебпаку проекту (vue-cli-service inspect).
• CLI Plugins - це пакети npm, які надають додаткові можливості нашим проектам. Їх назви починаються з @ vue / cli-plugin (для вбудованих плагінів) або vue-cli-plugin- (для плагінів спільноти). Ми можемо їх інтегрувати в процес розробки у будь-який час за допомогою команди vue add.

У наступних розділах ми детальніше розглянемо вище зазначені інструменти та засоби, але спочатку давайте подивимося на особливості, які роблять Vue CLI настільки потужним та гнучким.

CLI Vue - це повнофункціональна система для покращення робочого процесу Vue.js

Vue CLI прискорює і полегшує розвиток проекту Vue.js завдяки своїй великому запасу особливостей. Давайте подивимося, які ці особливості:

• Архітектура на основі плагіну. Vue CLI повністю побудований на основі плагінів, що робить його дуже гнучким і обширним. У нас є змогу вибирати, які з вбудованих плагінів додавати під час процесу створення проекту, а які ні. Але не тільки це, під час розробки проекту ми можемо застосовувати будь-яку кількість плагінів в будь-який час.
• Vue CLI повністю налаштовується, розширюється та оновлюється.
• Набір офіційних попередньо встановлених плагінів, який об'єднує першокласні інструменти фронтенду (Babel, ESLint, TypeScript, PWA, Jest, Mocha, Cypress та Nightwatch).
• Єдиний дефолтний пресет, який ми можемо модифікувати відповідно до наших потреб під час створення проекту або пізніше.
• Не потрібно викидати. На відміну від інструментів React і Angular CLI, ми можемо безпечно перевіряти та змінювати конфігурацію веб-пакета нашого проекту в будь-який час після його створення без необхідності вилучення додатку та переходу на ручну конфігурацію.
• Підтримка багатосторінкових додатків.
• Миттєвий прототип без будь-якої конфігурації.
• Різні цілі розробки дозволяють нам створювати різні версії нашого проекту, ми можемо використовувати одне й теж базове кодування для створення як додатів, так і бібліотеки чи веб-компонентів.
• Сучасна функція режиму. Це розробить наш додаток для сучасних браузерів, але з автоматичним ігноруванням для старіших. Круто, чи не так?
• Повноцінний GUI для легкого створення, оновлення та управління складними проектами.
• UI Plugin API. Vue UI пропонує плагін API, який використовується для додавання налаштованих функцій версії GUI CLI.
• Багато корисних плагінів від спільноти.

Початок роботи з Vue CLI

Дізнавшись про Vue CLI магію, настав час побачити її на практиці. По-перше, потрібно встановити Vue CLI 3. Для цього потрібно встановити Node.js 8.9+ ( рекомендовано 8.11.0+), тому нам потрібно переконатися, що в нас так є. Потім ми просто відкриваємо наш термінал або командний рядок і виконуємо:

1

npm install -g @vue/cli

Після інсталяції можна використовувати команду vue. Щоб перевірити, чи все працює правильно, ми запускаємо vue --version. Це має відображати встановлену версію Vue CLI. Тепер давайте розглянемо, які у нас можливості з Vue CLI.

Миттєве прототипування

Незважаючи на те, що Vue CLI призначений в першу чергу для роботи з складними проектами, це дозволяє нам швидко й без особливих зусиль випробовувати наші сирі ідеї. Його функція миттєвого прототипування може бути активована шляхом встановлення глобального додатку Vue CLI Service:

1

npm install -g @vue/cli-service-global

Відтепер ми можемо використовувати команду vue serve, коли захочемо. Давайте спробуємо. Ми створюємо файл App.vue із таким вмістом:

1

<template>

2

  <h1>Hello, Vue!</h1>

3

</template>

Потім у тому ж каталозі ми виконуємо:

1

vue serve

Це запустить Vue CLI сервер і додаток на http: // localhost: 8080 /. Коли ми відкриваємо браузер за цією адресою, ми маємо побачити приємне Hello, Vue! заголовок.

Створення нового проекту

Попередній розділ це тільки розігрів. Давайте тепер зробимо щось більш складне.

Команда vue create використовує інтерактивний процес для вибору опцій нового проекту. Давайте запустимо його і подивимося його опції.

1

vue create vuecli-project

Створити новий проект за допомогою Vue CLI

У першому вікні нам пропонується вибрати пресет. З пакету доступний лише один набір, який називається default. Ми виберемо другий варіант, який полягає виборі функцій вручну, необхідних для проекту, і натисніть Enter, щоб продовжити.

У наступному вікні ми використовуємо клавіші зі стрілочками для навігації вгору і вниз по списку функцій та пробіл, щоб вибрати те, що ми хочемо. Тут, поряд з вже вибраними Babel і Linter / Formatter, я також перевірив Router і Vuex. Після вибору потрібних функцій натисніть клавішу Enter, щоб перейти далі.

Далі нас запитають, чи слід використовувати режим історії роутера. Я натиснув Enter, щоб прийняти значення за умовчанням Yes.

У наступному вікні нам потрібно вибрати спосіб налаштування Linter. Я вибрав ESLint + Prettier.

Потім ми вибираємо, коли Linter використовується для перевірки проекту. Я вибрав Lint on save, який застосовується кожного разу при збереженні файлу.

Після цього нам потрібно вирішити, як ми хочемо налаштувати наш проект. Виберіть, чи потрібно використовувати окремі файли конфігурації для кожної функції, або потрібно включити всі параметри конфігурації у файл package.json. Я віддаю перевагу одному файлу, і вибравши параметр In package.json.

В останньому вікні ми маємо можливість зберегти всю конфігурацію всього створеного проекту в якості легкого для використання пресету для майбутніх проектів. Я зберіг свій як spa-simple. Пресети зберігаються в .vuerc файлі в папці користувача.

Коли ми завершимо процес створення, проект буде створено та налаштовано, а необхідні пакети будуть завантажені та встановлені.

Вивчення структури проекту

У цьому розділі ми розглянемо, що саме Vue CLI створив для нас.

У зазначеній вище папці проекту ми маємо такі файли та папки:

• Папка node_modules містить пакети, потрібні для інструментів додатків та розробки.
• public папка містить статичні активи проекту, які не будуть включені в процес комплектування.
• Папка src містить додаток Vue.js з усіма ресурсами.
• .gitignore містить список файлів і папок, виключених з елемента керування версією Git.
• babel.config.js містить налаштування конфігурації для компілятора Babel.
• package.json містить список пакетів, необхідних для розробки Vue.js, а також команди, що використовуються для інструментів розробки.
• package-lock.json містить повний список пакетів, необхідних для проекту та залежних файлів.
• README.md містить загальну інформацію про проект.

Новостворена папка src

Тепер давайте уважніше розглянемо на папку src:

У папці src, показаній вище, ми маємо такі файли та папки:

• assets папка, що використовується для статичних ресурсів, які вимагає додаток, і які будуть включені в процес комплектування.
• components папка використовується для компонентів програми.
• views папка використовується для компонентів, які будуть відображатися за допомогою функції URL-маршрутизації.
• App.vue є кореневим компонентом.
• main.js - це файл JavaScript, який створює поточні об'єкти Vue.
• router.js використовується для налаштування маршрутизатора Vue.
• store.js використовується для налаштування бази даних, створених за допомогою Vuex.

Зміна конфігурації проекту

Конфігурація проекту заздалегідь містить гнучкі налаштування, але, якщо при необхідності ми можемо змінити їх, додавши файл vue.config.js в папку проекту або додавши розділ vue до файлу package.json. Давайте спробуємо перший спосіб. Створюємо файл vue.config.js і вказуємо в нього наступний параметр:

1

module.exports = {

2

  runtimeCompiler: true

3

}

Це дозволить компонентам визначити їх шаблони як стрінги, а не як template елементи. Щоб ознайомитись із повним набором параметрів конфігурації, скористайтеся Vue CLI Config page.

Розробка проекту

Як ми вже бачили вище, служба Vue CLI Service за замовчуванням супроводжується трьома скриптами: serve, build та inspect. Перший використовується для розробки. Ми запускаємо наш проект за допомогою команди npm run serve:

Коли ми відкриваємо додаток у веб-переглядачі, у нас повинна з'явитися така сторінка:

Це сторінка Home.vue, яку використовує HelloWorld.vue компонент.

Команда serve запускає сервер розробки на базі webpack-dev-server з функцією Hot Module Replacement (HMR). Це означає, що коли ми внесемо зміни в наші компоненти та збережемо їх, вони будуть моментально відображатися, а сторінка оновиться в браузері.

Додавання нової функцій до проекту за допомогою плагінів VUE CLI

У будь-який момент розробки додатку нам треба буде надати проекту додаткові функції, і для цього потрібно встановити плагіни VUE CLI. Плагін Vue CLI може змінити конфігурацію webpack та вводити нові команди до vue-cli-service. Щоб встановити плагін, ми використовуємо команду vue add.

Припустимо, що у нашому проекті ми хочемо використовувати компоненти Bootstrap. На щастя, є плагін bootstrap-vue, який може їх надати. Для його встановлення ми запускаємо:

1

vue add bootstrap-vue

Після встановлення плагіна в папці src ми знайдемо нову папку plugins, в якій знаходиться щойно встановлений плагін.

Тепер, щоб протестувати функціональність плагіна, давайте змінимо файл About.vue:

1

<template>

2

  <div class="about">

3

    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">

4

        <p>For more information visit website</p>

5

      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>

6

    </b-jumbotron>

7

  </div>

8

</template>

І коли ми вказуємо на сторінку About в браузері, ми повинні побачити сторінку, оновлену та стилізовану за допомогою Bootstrap:

Розробка проекту на продакшн

Коли додаток готовий для деплою, потрібно створити набір пакетів, що містять лише код додатку та контент, а також модулі, від яких вони залежать, щоб ці файли могли встановитися на HTTP-сервері.

Створення додатку

Щоб створити наш додаток, ми запускаємо:

1

npm run build --modern

Аргумент --modern створює дві версії додатку. Один з них орієнтований на сучасні браузери, які підтримують останні функції JavaScript, а інший є резервним для старих веб-переглядачів, для яких потрібні додаткові бібліотеки, щоб впоратися з такими функціями. Найцікавіше те, що після того, як ми розмістимо додаток, вибір версії буде повністю автоматичним!

Примітка. Коли ми запускаємо команду build, Vue CLI вказує параметр --target, який дозволяє нам використовувати нашу кодову базу для різних випадків. Стандартна функція - створення додатка. У нас є ще два варіанти вибору: побудувати наш код як бібліотеку або як веб-компоненти. Перевірте сторінку Build Targets для отримання додаткової інформації.

Вивчаємо папку dist

Коли процес створення завершується, в корені проекту створюється папка dist. Давайте вивчимо його зміст:

Файл index.html основний файл додатку. Він містить елементи link та script, які завантажать всі необхідні CSS та JavaScript файли з папок css та js.

Отже, ми готові розгорнути наш додаток на сервері клієнта. Є безліч варіантів як це зробити. Ознайомтеся із ними, відвідавши сторінку Deployment.

Використання GUI з Vue UI

Vue CLI 3 дуже потужний, його можливості вартісні. Існує дуже багато варіантів, команд і опцій для налаштування та запам'ятовування. Через це він стає більш складним і важким для роботи. Щоб все трималося у простому стані, Guillaume Chau створив Vue UI, що значно спрощує досвід розробки та робить його більш доступним. Спочатку така комбінація інструментів CLI з графічним інтерфейсом може здатися дещо дивною, але згодом ви переконаєтеся, що цей винятковий симбіоз є досить потужним та ефективним.

Відтворення нашого проекту за допомогою Vue UI

У цьому розділі ми знову створимо такий самий проект, як було на початку, але на цей раз ми будемо використовувати Vue UI.

Vue UI розроблений із власним UI фреймоворком, тому для запуску в браузері не потрібно ніякого Electron. Просто запустіть команду vue ui в будь-якій директорії:

1

vue ui

Vue Project Manager запускається із вибраної вкладки «Projects». Тут ще немає створених проектів. Тут ще немає створених проектів. Щоб тут побачити проекти, нам потрібно або створити їх через UI або імпортувати проекти, створені за допомогою CLI. Давайте подивимося, як ми можемо створити новий проект.

Натиснувши на вкладку Create, перейдіть до потрібного каталогу нашого додатка та натисніть кнопку Create a new project here.

На наступному екрані ми назвемо папку проекту та оберемо улюблений менеджер пакетів.

Тепер у нас є змога вибрати пресет для проекту. Це може бути стандартний, ручний, пультовий або користувальницький пресет, який ми створили раніше. spa-simple є прикладом користувальницького пресету. Тут ми вибираємо Manual.

Потім ми вибираємо плагіни, які хочемо встановити.

Нарешті, ми встановили параметри конфігурації для плагінів, які ми вибрали. Якщо ми готові, натискаємо кнопку Create Project.

Тепер проект створено і нас перенаправлено до дашборду проекту.

Використання Vue UI Project панелі

У розділі Plugins вказані всі встановлені плагіни. Щоб встановити новий плагін, ми натискаємо кнопку Add plugin.

Тут ми знаходимо необхідний плагін, а коли знаходимо, натискаємо кнопку Install. У нашому випадку ми виконуємо пошук та встановлення плагіна bootstrap-vue.

Коли плагін встановлений, у вкладці Configuration ми можемо встановити надані параметри.

На вкладці Files changed, ми можемо перевірити, які файли були змінені і як. Тут я не хочу вносити жодних змін, тому я натискаю кнопку Skip.

У розділі Dependencies ми перерахували всі основні залежності та залежності розробки, необхідні для розробки. Щоб додати залежність, ми натискаємо кнопку Install dependency.

У модальному вікні ми можемо пошукати основні залежності або залежності розробки та встановити їх.

У розділі Configuration ми можемо налаштувати параметри, надані для доданих нами плагінів. Тут ми маємо налаштування для самого Vue CLI і для плагіна ESLint.

Розділ Tasks надає нам зручний спосіб використовувати всі доступні команди, надані від Vue CLI та інших плагінів. На цьому екрані вибирається serve завдання. Ми можемо змінити його параметри, натиснувши кнопку Parameters.

У модальному вікні ми вибираємо параметри, з якими ми хочемо запустити завдання.

Коли ми запускаємо завдання serve, інформаційна панель оновлюється та показує деяку корисну інформацію.

Коли ми перемикаємось на вкладку Output, ми отримуємо логи для процесу завдання.

Коли ми переходимо на вкладку Analyzer, ми отримуємо приємний графік, який узагальнює інформацію всього проекту.

Завдання build майже схоже на завдання serve, за винятком того, що перший може створити пакет, який може бути використаний для встановлення додатку.

Ми можемо встановити параметри для завдання build так само, як і завдання serve.

Поле Output завдання inspect дає нам інформацію про встановлену конфігурацію вебпаку.

Ось і все! Ми успішно відновили наш проект за допомогою Vue UI. Але ми переконалися, що з використанням GUI, процес створення та конфігурації набагато простіший та приємніший.

Висновок

ВисновокУ цьому підручнику ми дізналися, що Vue CLI є повноцінна система для сучасної веб-розробки. Це дозволяє швидко і легко працювати з усією екосистемою Vue та сторонніми інструментами. Звичайно, ми не зобов'язані використовувати Vue CLI для наших проектів Vue.js. Це цілком наш вибір. Але коли ми прагнемо швидкості та якості, Vue CLI існує для професіонального створення, управління та впровадження наших проектів.