В тази статия ще разгледаме Vue, ще научим как да го инсталираме и да създадем нов проект, ще проучим структурата на целия проект и на всеки отделен компонент и ще разберем как да стартираме проекта локално.
Тук ще разгледаме:
- Инициализиране на нов проект
- Структура на проекта
- .vue файлове
- Стартиране на приложението локално
Какво е Vue
Vue е модерна JavaScript рамка за фронтенд уеб разработки, която предоставя полезни средства за прогресивно подобряване – за разлика от много други рамки, можете да използвате Vue за подобряване на съществуващия HTML. Това ви позволява да използвате Vue като заместител на библиотеката като JQuery.
Като се има предвид това, можете също да използвате Vue, за да напишете цели приложения работещи на една страница (така наречените SPA – Single Page Applications). Това ви позволява да създавате HTML структури, управлявани изцяло от Vue, което може да подобри изживяването и производителността на разработчиците при работа със сложни приложения. Фреймуърка също така ви позволява да се възползвате и от библиотеките за маршрутизиране от страна на клиента и за управление на състоянието (поведението) когато това е необходимо. Освен това Vue използва подход на „средно ниво“ към инструментариума като маршрутизиране от страна на клиента и управление на състоянието. Въпреки че основният екип по разработката на Vue поддържа библиотеки за тези функции, те не са включени директно във Vue. Това ви позволява да изберете различна библиотека за маршрутизиране и управление на състоянието, ако те по-добре отговарят на вашето приложение, нужди и изисквания.
Освен че това ви позволява да интегрирате Vue във вашите приложения постепенно, Vue предлага също така и така наречения прогресивен подход при писане на маркъп код. Подобно на повечето рамки за фронтенд разработка, Vue ви позволява да създавате преизползваеми HTML блокове с помощта на компоненти. През по-голямата част от времето при работа с компонентите на Vue, те ще бъдат писани с помощта на специален HTML шаблонен синтаксис. Когато се нуждаете от повече контрол, отколкото позволява синтаксисът на HTML, можете да пишете и JSX или обикновени JavaScript функции, за да дефинирате компонентите си.
Докато работите през този урок, може да искате да запазите отворено ръководство на Vue и документация за API в други раздели, така че да можете да се обръщате към тях, ако имате нужда от повече информация по която и да е подтема.
За добро (но потенциално пристрастно) сравнение между Vue и много други рамки вижте Vue Docs: Сравнение с други рамки.
Инсталация
За да използвате Vue в съществуващ сайт, можете да заредите един от следните <script> елементи на страницата си. Това ви позволява да започнете да използвате Vue на съществуващи сайтове, поради което Vue се счита за “прогресивна рамка”. Това е чудесна възможност при мигриране на съществуващ проект работещ с библиотеки като JQuery към Vue. С този метод можете да използвате много от основните характеристики на Vue, като атрибути, персонализирани компоненти и управление на данни.
- Скрипт за разработка (Неоптимизиран, но включва конзолни предупреждения. Страхотен за разработка
<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js“></script> - Производствен скрипт (Оптимизирана версия, минимални предупреждения в конзолата. Препоръчително е да посочите номер на версията, когато включвате Vue на вашия сайт, така че всякакви актуализации на рамката да не нарушават вашия действащ сайт, без да сте информирани.)
<script src=“https://cdn.jsdelivr.net/npm/vue@2″></script>
Този подход обаче има някои ограничения. За да създадете по-сложни приложения, ще искате да използвате модул пакета Vue от NPM. Това ще ви позволи да използвате разширени функции на Vue и да се възползвате от функционалностите, които предлага WebPack. За да се улесни изграждането на Vue приложения има и Vue CLI, който да рационализира процеса на разработка. За да използвате пакета npm и CLI, ще ви трябва:
- Инсталиран Node.js 8.11+.
- npm или прежда.
За да инсталирате CLI, изпълнете следната команда във вашия терминал:
npm install –global @vue/cli
Или ако предпочитате да използвате yarn:
yarn global add @vue/cli
Веднъж инсталиран Vue CLI, за да инициализирате нов проект можете да отворите терминал в директорията, в която искате да създадете проекта, и да стартирате командата vue create <project-name>. След това CLI ще ви даде списък с възможните конфигурации които можете да използвате за проекта. Има няколко предварително зададени, но можете да си направите други по ваш избор и сами. Тези опции ви позволяват да конфигурирате неща като TypeScript, linting, vue-router, инструменти за тестване и др.
Инициализиране на нов проект
За да изследваме различните функции на Vue, ще създадем примерно приложение за водене на списък със задачи. Ще започнем с използването на Vue CLI, за да създадем нова инстанция, в която ще вградим нашето приложение. Следвайте стъпките по-долу:
- В терминала променете текущата директория със cd за да бъде там където искате да създадете вашето примерно приложение и след това стартирайте командата vue create todo-vue-app.
- Използвайте клавишите със стрелки и Enter за да изберете опцията „Ръчно избиране на функции“.
- Първото меню, което ще ви бъдете представено ви позволява да изберете кои функции искате да включите във вашия нов проект. Уверете се, че са избрани „Babel“ и „Linter/Formatter“. Ако не са, използвайте клавишите със стрелки и интервала за да ги включите. След като бъдат избрани натиснете Enter за да продължите.
- След това ще изберете конфигурация за Linter/Formatter. Придвижете се до „Eslint with error prevention only” (само с предотвратяване на грешки) и натиснете Enter отново. Това ще ни помогне да улавяме често срещани грешки, но не и да бъдем прекалено мнителни.
- След това ще трябва да конфигурирате какъв тип автоматизирано свързване искаме. Изберете „Lint on save“. Това ще проверява за грешки, в момента когато запишем файла в проекта. Натиснете Enter за да продължите.
- Сега ще изберем как искаме нашите конфигурационни файлове да се управляват. “In dedicated config files” (специални конфигурационни файлове) ще поставим настройките на нашата конфигурация в техните собствени, специални файлове – неща като ESLint. Другата опция, „In package.json“, ще постави всички настройки за конфигуриране във package.json файла на приложението . Изберете “In dedicated config files” и натиснете Enter.
- Накрая ще бъдете попитани дали искате да запазите това като предварително зададени настройки за в бъдеще. Това зависи изцяло от вас. Ако харесвате тези настройки над съществуващите предварителни настройки и искате да ги използвате отново, въведете y (yes) в противен случай въведете n (no).
CLI ще започне да изгражда “скеле” на вашия нов проект и ще инсталира всички необходими зависимости.
Ако никога преди не сте стартирали Vue CLI, ще получите още един въпрос – ще бъдете помолени да изберете мениджъра на пакети. Можете да използвате клавишите със стрелки, за да изберете кой мениджър предпочитате. Vue CLI ще използва избрания мениджър на пакети отсега нататък по подразбиране. Ако трябва да използвате различен мениджър на пакети след това, можете да подадете флаг –packageManager=<package-manager>, когато стартирате vue create. Така че, ако искате да създадете todo-vue проекта с npm и преди това сте избрали yarn, ще стартирате командата така: vue create todo-vue –packageManager=npm.
Забележка : Не сме разгледали всички опции тук, но можете да намерите повече информация за CLI в документите на Vue.
Структура на проекта
Ако всичко е минало успешно, CLI трябва да е създал серия от файлове и директории за вашия нов проект. Най-значимите са следните:
- .eslintrc.js: Това е конфигурационен файл за eslint . Можете да го използвате, за да управлявате правилата за linting.
- babel.config.js: Това е конфигурационният файл за Babel, който трансформира съвременните JavaScript функционалности, използвани в кода, който разработвате, в по-стария синтаксис, който е по-съвместим с различните браузъри със производствения код. Можете да регистрирате допълнителни babel плъгини в този файл.
- .browserslistrc: Това е конфигурацията за Browserslist. Можете да използвате това, за да контролирате за кои браузъри да се оптимизират инструментите ви.
- public: Тази директория съдържа статичните файлове, които ще се публикуват, но няма да се обработват от Webpack по време на изграждането (с едно изключение; index.html получава известна обработка).
- favicon.ico: Това е фавиконът за вашето приложение. По подразбиране е логото на Vue.
- index.html: Това е основният шаблон за вашето приложение. Вашето Vue приложение ще се изпълнява винаги от тази HTML страница и можете да използвате синтаксиса на шаблона lodash, за да интерполирате стойности в него. Забележка : това не е шаблонът за управление на оформлението на вашето приложение – този шаблон е за управление на статичен HTML, който се намира извън вашето приложение Vue. Редактирането на този файл обикновено се случва само в случаи на напреднала употреба.
- src: Тази директория съдържа ядрото на вашето Vue приложение. Там имаме следните файлове:
- main.js: това е входната точка за вашето приложение. Понастоящем този файл инициализира вашето Vue приложение и посочва към кой HTML елемент във index.html файла трябва да бъде прикачено вашето приложение. Този файл често е мястото, където регистрирате глобални компоненти или допълнителни библиотеки за Vue.
- App.vue: това е компонентът от най-високо ниво във вашето Vue приложение. Вижте по-долу за повече относно компонентите на Vue.
- components: тази директория е мястото, където съхранявате компонентите си. В момента там има само един примерен компонент.
- assets: Тази директория е за съхраняване на статичните активи като CSS и изображения. Тъй като тези файлове се намират в src директорията, те ще могат да бъдат обработвани от Webpack. Това означава, че можете да използвате препроцесори като Sass / SCSS или Stylus .
Забележка : В зависимост от опциите, които изберете при създаването на нов проект, може да присъстват и други директории (например, ако изберете router , ще имате и views дoиректория).
Vue файловете с разширение .vue (единични файлови компоненти)
Подобно на много други фреймуърк рамки, компонентите са централна част от изграждането на приложения със Vue. Тези компоненти ви позволяват да разделите едно голямо приложение на дискретни градивни елементи, които могат да бъдат създадени и управлявани поотделно и да прехвърляте данни помежду им когато е необходимо. Тези малки блокове могат да ви помогнат да изградите логика помежду им и да тествате кода си.
Докато някои рамки ви насърчават да разделяте вашия шаблон, логика и код за стилизиране в отделни файлове, Vue използва обратния подход. Използвайки еднофайлови компоненти, Vue ви позволява да групирате вашите шаблони, съответния скрипт и CSS заедно в един единствен файл, завършващ със разширението .vue. Тези файлове се обработват от инструмент за изграждане на JavaScript файлове (напр. Webpack), което означава, че можете да се възползвате от инструментите за изграждане във вашия проект. Това ви позволява да използвате още и инструменти като Babel, TypeScript, SCSS и други, за да създавате по-сложни компоненти.
Като бонус проектите създадени с Vue CLI, са конфигурирани да използват .vue файлове с Webpack. Всъщност, ако погледнете вътре в src папката в проекта, която създадохме със CLI, ще видите един .vue файл: App.vue.
App.vue
Отворете App.vue файла и ще видите, че там има три обособени секции с код: <template>, <script>, и <style>, които съдържат компонентите за един шаблон, скриптове и оформяне на информацията. Всички еднофайлови компоненти споделят същата основна структура.
<template> съдържа цялата структура за маркиране и логиката за презентационната част на вашия компонент. Вашият шаблон може да съдържа всеки един валиден HTML таг, както и някой специфичен Vue синтаксис, които ще разгледаме по-късно.
Забележка : Като зададете lang атрибута на <template> маркера, можете да използвате синтаксиса на шаблона Pug вместо стандартния HTML – <template lang=“pug“>. Ще се придържаме към стандартния HTML по време на този урок, но си струва да се знае, че това е възможно.
Секцията <script> съдържа цялата недисплейна логика на вашия компонент. Най-важното е, че вашият <script> маркер трябва да има поне един експортиран JS обект по подразбиране. Този обект е мястото, където можете локално да регистрирате компоненти, да дефинирате входни данни за компонентите (props), да обработвате локално дадено състояние, да дефинирате методи и др. Вашата “стъпка за изграждане” ще обработи този обект и ще го трансформира (заедно с вашия шаблон) във Vue компонент с помощта на render() функцията.
В случая App.vue нашият експорт по подразбиране задава името на компонента app и го регистрира като HelloWorld и го добавя в components свойството. Когато регистрирате компонент по този начин, вие го регистрирате локално. Локално регистрираните компоненти могат да се използват само в компонентите, които ги регистрират, така че трябва да ги импортирате и регистрирате във всеки един файл на компонента, който ще ги използва.
Забележка : Ако искате да използвате синтаксиса на TypeScript , трябва да зададете lang атрибута на <script> маркера, за да означи на компилатора, че използвате TypeScript – <script lang=“ts“>.
<style>е мястото, където ще пишете CSS-а отговарящ за компонента. Ако добавите scoped атрибута – <style scoped> Vue ще обхване стиловете към съдържанието на вашия SFC. Това работи подобно на CSS-in-JS решенията, но ви позволява да пишете просто обикновен CSS.
Забележка : Ако изберете CSS предпроцесор при създаването на проекта чрез CLI, можете да добавите lang атрибут към <style> маркера, така че съдържанието да може да бъде обработено от Webpack по време на изграждането. Например, <style lang=“scss“> ще ви позволи да използвате SCSS синтаксис в информацията за стила си.
Стартиране на приложението локално
Във Vue CLI се предлага вграден HTTP сървър за удобство по време на разработка. Това ви позволява да стартирате приложението си локално на вашата машина, като така ще можете лесно да тествате без да е необходимо да конфигурирате сами какъвто и да е сървър. CLI добавя serve команда към package.json файла на проекта като npm скрипт, така че ще можете лесно да го стартирате.
Във вашия терминал опитайте да стартирате npm run serve (или yarn serve ако предпочитате yarn). Вашият терминал трябва да изведе нещо подобно на следното:
INFO Starting development server…
98% after emitting CopyPlugin
DONE Compiled successfully in 18121ms
App running at:
– Local: <http://localhost:8080/>
– Network: <http://192.168.1.9:8080/>
Note that the development build is not optimized.
To create a production build, run npm run build.
Ако отидете до „локалния“ адрес в нов раздел на браузъра (трябва да изглежда така http://localhost:8080 като посоченото по-горе, но може да варира в зависимост от някои настройки), ще трябва да видите приложението си. В момента трябва да съдържа приветствено съобщение, връзка към документацията на Vue, връзки към добавките, които сте добавили, когато инициализирахте приложението със CLI, както и някои други полезни връзки към общността и екосистемата на Vue.
Да направим няколко промени
Нека направим първата си промяна в приложението – да изтрием логото на Vue. Отворете App.vue файла и изтрийте <img> елемента от раздела в шаблона:
<img alt=“Vue logo“ src=“./assets/logo.png“>
Ако вашият сървър все още работи, бихте могли да видите логото, как бива премахнато от визуализирания сайт почти моментално. Нека също така да премахнем HelloWorld компонента от нашия шаблон.
Изтрийте този ред:
<HelloWorld msg=“Welcome to Your Vue.js App“/>
Ако сега запазите промените на App.vue файла си, визуализираното приложение ще изведе грешка, защото сме регистрирали компонента, но вече не го използваме. Също така трябва да премахнем и редовете вътре в <script> елемента, които импортират и регистрират компонента:
Изтрийте тези редове сега:
Изобразеното ви приложение вече не трябва да показва грешка, а само празна страница, тъй като в момента няма видимо съдържание вътре в <template> тага.
Нека добавим нов <h1> елемент вътре в <div id=“app“>. Тъй като ще създаваме приложение за списък със задачи, нека зададем текста на заглавието да бъде „Списък със задачи“. Добавете го така:
Обобщение
Научихме за някои от идеите, които стоят зад Vue, създадохме скеле за примерното ни приложение, проверихме го и направихме няколко предварителни промени.
С основното въведение приключихме, и сега ще отидем по-нататък и ще започнем да градим нашето примерно приложение, основно приложение за списък на Todo, което ни позволява да съхраняваме списък с елементи, да ги маркираме, когато сме готови, и да филтрираме списъка по всички, пълни и непълни задачи.
В следващата статия ще изградим първия си персонализиран компонент и ще разгледаме някои важни концепции като предаване на данни в него и запазване на състоянието му.