Създаване на първия ви сайт с Laravel Elixir и Vueify, Laravel на английски език
- 1. Запознайте се с Vue.js
- 2. Използване на Vue в редовни проекти
- 3. Запознайте се с Vueify
- 4. Какво представлява Laravel Elixir?
- 4.1. Използване на Laravel Elixir и Vueify
- 4.2. Импортиране на пакети
- 4.3. Вмъкване в HTML страница
- 4.4. Създаване на вашия първи компонент
- 4.5. Включване на компоненти в други компоненти
Запознайте се с Vue.js
И така, какво е Vue.js?
Той има двупосочно свързване на данни, като в Ember и Angular.
Той е лек и може да се използва за лесно декориране на компонент като Knockout.
Той може да бъде поставен на страница с нулева сложност на компилация, но също така може лесно да бъде съставен в подкрепа на импортирането на ES2015.
Той има бързо свързване на данни, позволявайки изчислени свойства и е безплатен за всички обекти от данни, предадени към него, точно както в React.
Той предоставя инструменти за разделяне на вашия код на компоненти, които могат да бъдат свързани като самостоятелни файлове, точно както в React.
Той има рутер, така че можете да го използвате за приложения на една страница, но също така работи добре за еднократни и прототипиране.
Използване на Vue в редовни проекти
Нека да видим как да работим с Vue в най-простия случай (без Elixir и Vueify): fiddle.
В този пример правим две неща: първо, ние импортираме Vue от CDN, второ, създаваме div (PHP #example), който ще използваме като наш Vue контейнер, и ще напишем в него някакъв код на шаблон. И трето, ние създаваме корен екземпляр Vue и го свързваме с този контейнер.
В резултат Vue предава обекта с данни на шаблона, дефиниран в изгледа, и го изобразява.
Има много неща, които можете да направите по-нататък, но ще направим голям скок - добавяне на система за изграждане и система от компоненти на Vueify. Тези инструменти не са необходими за разработката на Vue, но след като вашето приложение и компоненти достигнат определено ниво на усъвършенстване, ще откриете огромната сила на тези инструменти.
Сега ще преминем към синтаксиса компонент в едно на Jue на Vue, използвайки Vueify. Също така ще използваме системата за изграждане на Laravel Elixir Gulp, за да свържем нашите зависимости, да изградим нашите скриптове и да получим достъп до синтаксиса на ES2015, използвайки Babel.
Запознайте се с Vueify
Преди да се потопите в Elixir, нека да разгледаме Vueify. Ето един прост Vueify файл, който ще наречем Hero.vue:
И ще го използваме в HTML по следния начин:
Ето как поставихме екземпляр на нашия компонент Hero на нашата страница.
Какво представлява Laravel Elixir?
Нека да преминем към нашата система за изграждане.
Един от основните недостатъци на React е сложността на инструментите за изграждане, от които се нуждаете, за да се научите да работите с него. Ние разгледахме Webpack (Unpacking Webpack) по-рано, но не може да се каже, че е особено лесно да се научи.
Можете да използвате Vue без никакви сложни инструменти, но големите приложения често се нуждаят от по-сложни системи, които често се нуждаят от по-сложни инструменти.
Вносът на Gulp и ES2015 са първите стъпки за опростяване на живота ни. ES2015 import стандартизира процеса на импортиране на модули между нашите компоненти. И Gulp е най-добрият инструмент за изграждане, с който съм работил (да, прочетох тези статии за това как NPM скриптове за изграждане промени света и се опитах да ги използвам и бих предпочел да изтрия този кошмар от главата си завинаги.).