Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Vue
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Pembelight (you can also view the original English article)

Навряд чи ми можемо уявити сучасну веб-розробку без допомоги інструментів інтерфейсу командного рядка (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+), тому нам потрібно переконатися, що в нас так є. Потім ми просто відкриваємо наш термінал або командний рядок і виконуємо:

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

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

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

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

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

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

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

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

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

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

Create a project with Vue CLI pick a preset

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

Create a project with Vue CLI Manually select features

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

Create a project with Vue CLI Use history mode

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

Create a project with Vue CLI Pick a linter

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

Create a project with Vue CLI Additional lint features

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

Create a project with Vue CLI Dedicated config file or config in packagejson

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

Create a project with Vue CLI Save these settings as a preset

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

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

Create a project with Vue CLI Generating project files

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

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

Create a project with Vue CLI The project structure

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

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

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

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

Create a project with Vue CLI the src folder

У папці 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 і вказуємо в нього наступний параметр:

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

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

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

Starting the development server

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

Running the new app

Це сторінка 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, який може їх надати. Для його встановлення ми запускаємо:

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

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

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

App updated with Bootstrap

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

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

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

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

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

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

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

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

The dist folder

Файл 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 в будь-якій директорії:

The Vue UI homescreen

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

The Vui UI create project tab

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

Create a new project with Vue UI pick a folder

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

Create a new project with Vue UI Select a preset

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

Create a new project with Vue UI Select project features

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

Create a new project with Vue UI Select plugins

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

Create a new project with Vue UI Welcome to your new project

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

Vue UI Project Dashboard

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

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

Project Dashboard Plugins section

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

Project Dashboard add a plugin

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

Project Dashboard Configuration tab

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

Project Dashboard Dependencies tab

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

Project Dashboard Install new dependency

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

Project Dashboard Plugin settings

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

Project Dashboard Project tasks tab

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

Project Dashboard serve tasks parameters

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

Project Dashboard Running the serve task

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

Project Dashboard serve task output

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

Project Dashboard serve task analyzer

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

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

Project Dashboard build task parameters

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

Project Dashboard build task output

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

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

Висновок

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.