Урок за Vue.js за начинаещи разработчици: Научете основите и използвайте тази структура на начинаещи Vue

Vue.js Урок за начинаещи разработчици


Всеки път, когато започнете да използвате нови технологии в развитието си, може да се почувствате поне малко сплашени. Особено когато сред природата има безброй пакети от npm. Смесването и съчетаването на неща понякога може да отнеме много време и усилия и обикновено е разочароващо. Тук влиза в игра следният урок за Vue.js за начинаещи разработчици.

Какво е Vue.js? Защо трябва да ти пука?

Vue.js или Vue за кратко е JavaScript рамка за изграждане на потребителски интерфейси. В сравнение с други рамки, като Angular или React, Vue е по-достъпен и не е толкова стръмен на кривата на обучение.

Vue също е модулен и ще ви позволи да разделите кода си на компоненти за многократна употреба. Всеки от тях има своя собствена HTML маркировка, CSS и JavaScript код.

Какъв е обхватът на този урок за Vue.js?

Целта на този кратък урок за Vue.js е да ви предостави някои скелета, на които можете да изградите и експериментирате с Vue. Ще разгледаме основна настройка на приложение Vue вътре в таблото за управление на WordPress.

(Забележка; В това ръководство няма да ви учим Vue per se, но можете да продължите и да научите повече за рамката от официално ръководство след като настроите проекта тук – върху който можете да продължите да експериментирате, след като сме готови. Също така препоръчваме някои от най-интересните библиотеки с компоненти на Vue UI, които правят процеса на разработване по-ефективен.)

Това, което ще направим, е да използваме предварително определен шаблон за WordPress плъгини, използвайки Vue. Можете да го намерите в следното хранилище на GitHub, ако искате да разгледате по-задълбочено: https://github.com/abaicus/vue-wp-bootstrap.

Урок за Vue.js: Предпоставки

Има няколко неща, които вече трябва да сте настроили на компютъра си, за да продължите да следвате това ръководство:

Първо, ще ви трябва LAMP стек – можете да използвате XAMPP на Windows или Mac или Local от Flywheel на Mac и след това да си настроите свежа локална инсталация на WordPress.

Уверете се, че имате NodeJS мениджър на пакети (npm), инсталиран на вашата машина. Също така ще трябва да инсталирате още два пакета чрез терминала – Vue CLI и инструментът за инициализиране на шаблон Vue. Така:

$ npm install -g @ vue / cli
$ npm install -g @ vue / cli-init

След като инсталирате тези две зависимости, трябва да промените активната директория в директорията wp-content / plugins на вашия локален индекс на WordPress и след това да изпълните следната команда:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

След това ще бъдете подканени да отговорите на някои въпроси, свързани с настройката на вашия проект.

За бързината на Build просто продължете и изберете първата опция за сега "Времетраене + Компилатор: препоръчително за повечето потребители".

Можете да активирате ESLint лайнера, ако искате. Той ще открие всички грешки във свързването във вашия проект, но не е задължително да се притеснявате за това в момента.

Команда за ангажиране и куки за предварително ангажиране са предназначени за проверка на вашите съобщения за ангажиране и кода, преди да изпратите ангажимент в GitHub – за да поддържате всичко подредено и добре форматирано.

След като приключите, терминалът изглежда повече или по-малко след това:

Можете да продължите напред и да следвате инструкциите на екрана. Променете директорията в новосъздадената директория на плъгини и изпълнете командите, показани в терминалната подкана. Така приложението ви ще се стартира и ще чака промени в кода ви и той ще пренесе кода Vue в JavaScript.

Какво прави?

Не много. Това е само основно приложение, което показва някои данни от бекенда. Не много Vue под капака. Можете да продължите към страницата на таблото за приставки и да я активирате. Ще добавите нова страница във вашето административно меню. При навигиране до него ще намерите страница с таблото с два низа:

Структура на скелето на приставките

Нека разгледаме структурата на файла за новосъздадения плъгин. Ще игнорираме повечето конфигурационни файлове в този урок за Vue.js, за да можем да се съсредоточим върху структурата на приложението:

Първо, имаме файл plugin.php, който е входната точка за действителния плъгин. Ето, ние имаме основното Plug-in клас. Тук се включват и изпълняват основните компоненти на приложението.

След това е файлът package.json, където са дефинирани всички зависимости и куп друга информация за проекта. Частта, в която може да се интересувате, живее в рамките на "скриптове" област. Там имате всички команди, които можете да стартирате с префикса npm run. Важните за момента трябва да бъдат npm run dev (който изгражда приложението за разработка) и npm run build (които трябва да стартирате, след като сте готови да внедрите приложението си за производство). Останалите команди са съседни на тези две или правят други неща, за които не бива да се притеснявате в този момент.

В директорията включва три файла:

  • Класът rest.php не прави нищо в момента, но вече имате структура, която да добавите маршрутите си RestAPI
  • Class.php класът се справя със стила и скрипта. Тук JavaScript файлът е локализиран, за да предава начални данни от PHP към нашето приложение Vue. В момента са изпратени само два текста, но можете да включите всичко, което искате.
  • Файлът admin.php е този, който се грижи за добавяне на нова страница в таблото за управление и рендиране на действителната страница с приставки. Ще забележите, че самото приложение се изобразява точно като два празни маркера във функцията plugin_page (). Това е така, защото JavaScript ще се справи с реалното изобразяване на приложението, след като се зареди.

В директорията на активите ще намерите още четири директории:

  • Src директория – изходните файлове за нашето приложение Vue, за което ще говорим по-късно.
  • Директората на scss – файловете в стила на SCSS, от които генерираме таблицата за стилове CSS.
  • Директория js – транслираният код, който се генерира от нашите файлове в директорията src.
  • Каталогът css – компилираният стил от SCSS файловете.

Src директория и Vue шаблони файлове

Вътре в тази директория има два файла: main.js и App.vue. Файлът main.js е входната точка за приложението. Той свързва компонента на приложение Vue към елемента DOM със съответния идентификатор.

/ * jshint esversion: 6 * /
импортиране Vue от ‘vue’
импортиране на приложение от „./App.vue“

window.addEventListener (‘зареждане’, функция () {
ново Vue ({// eslint-disabled-line no-new
el: ‘# mvdp-приложение’,
компоненти: {App},
визуализация: (h) => ч (App)
})
})

Действителната маркировка на приложението е вътре в шаблона на App.vue:

/ * jshint esversion: 6 * /

{{This.strings.title}}

{{This.strings.description}}

/ * глобален MVDP * /
експортиране по подразбиране {
данни () {
връщане {
струни: MVDP.strings
}
},
име: „App.vue“
}

Можете да видите вътре в фрагмента по-горе, че използваме низовете, локализирани в клас Активи. Една от големите характеристики на Vue е, че кодът на компонента е добре организиран в шаблон, скрипт и стил, което улеснява разбирането на структурата.

Това е всичко, сега имате солидна отправна точка за всичко, което искате да развиете по-нататък с Vue.js! Надявам се този урок за Vue.js да е бил полезен.

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление, презентация и редакция от Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map