Výukový program Vue.js pro začínající vývojáře: Naučte se základy a použijte tuto strukturu Starter Vue

Výukový program Vue.js pro začínající vývojáře: Naučte se základy a použijte tuto strukturu Starter Vue

Výukový program Vue.js pro začínající vývojáře: Naučte se základy a použijte tuto strukturu Starter Vue
СОДЕРЖАНИЕ
02 июня 2020

Výukový program Vue.js pro začátečníky


Kdykoli začnete používat nové technologie ve vašem vývojovém toku, můžete se cítit alespoň trochu zastrašeni. Obzvláště když je v divočině spousta npm balíčků. Míchání a sladění věcí může někdy vyžadovat spoustu času a úsilí a obvykle je frustrující. Zde začíná hrát následující výukový program Vue.js pro začátečníky.

Co je Vue.js? Proč byste se měli starat?

Vue.js nebo Vue v krátkosti je rámec JavaScriptu pro vytváření uživatelských rozhraní. Ve srovnání s jinými kostry, jako je Angular nebo React, je Vue přístupnější a nemá tak strmý průběh učení.

Vue je také modulární a umožní vám rozdělit kód na opakovaně použitelné komponenty. Každý z nich má svůj vlastní kód HTML, CSS a kód JavaScript.

Jaký je rozsah tohoto tutoriálu Vue.js?

Účelem tohoto krátkého tutoriálu Vue.js je poskytnout vám lešení, na kterých můžete stavět a experimentovat s Vue. Podíváme se na základní nastavení aplikace Vue uvnitř ovládacího panelu WordPress.

(Poznámka; nebudeme vás učit Vue per se v této příručce, ale můžete pokračovat a dozvědět se více o rámci z oficiální průvodce poté, co zde nastavíte projekt – na kterém můžete pokračovat, i když skončíme. Doporučujeme také některé z nejzajímavějších knihoven komponent Vue UI, které zefektivňují proces vývoje.)

Budeme dělat předdefinovanou šablonu pro pluginy WordPress pomocí Vue. Najdete jej v následujícím úložišti GitHub, pokud se chcete hlouběji podívat: https://github.com/abaicus/vue-wp-bootstrap.

Výukový program Vue.js: Předpoklady

Chcete-li pokračovat v této příručce, měli byste již v počítači nastavit několik věcí:

Nejprve budete potřebovat LAMP stack – můžete použít XAMPP na Windows nebo Mac, nebo Local by Flywheel na Mac, a pak si nastavit novou místní instalaci WordPress.

Ujistěte se, že máte Správce balíků NodeJS (npm) nainstalované ve vašem počítači. Prostřednictvím terminálu budete také muset nainstalovat další dva balíčky – Vue CLI a nástroj pro inicializaci šablony Vue. Jako tak:

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

Po instalaci těchto dvou závislostí je třeba změnit aktivní adresář do adresáře wp-content / plugins vaší lokální instance WordPress a pak tam spustit následující příkaz:

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

Dále budete vyzváni k zodpovězení několika otázek týkajících se nastavení projektu.

Pro výzvu Sestavit jednoduše pokračujte a vyberte první možnost pro tuto chvíli "Runtime + Compiler: doporučeno pro většinu uživatelů".

Můžete povolit ESLint linter, pokud chcete. Zjistí případné chyby v obložení vašeho projektu, ale nemusíte se hned teď obávat.

Háčky Commit Lint a Pre-Commit Hooks mají zkontrolovat vaše zprávy odevzdání a kód před odesláním potvrzení GitHubu – udržet vše uklizené a pěkně naformátované.

Až budete hotovi, skončí terminál, který bude vypadat víceméně takto:

Můžete pokračovat a postupujte podle pokynů na obrazovce. Změňte adresář na nově vygenerovaný adresář pluginů a spusťte příkazy uvedené v příkazovém řádku terminálu. Tím bude vaše aplikace spuštěna, čeká na změny uvnitř kódu a převede kód Vue do JavaScriptu.

Co to dělá?

Ne moc. Toto je pouze základní aplikace, která zobrazuje některá data z backendu. Není moc Vue pod kapotou. Můžete přejít na stránku Dashboard Plugins a aktivovat ji. V nabídce Správce se přidá nová stránka. Po navigaci na tuto stránku najdete stránku řídicího panelu se dvěma řetězci:

Struktura lešení lešení

Pojďme se podívat na strukturu souborů nově generovaného pluginu. V tomto tutoriálu Vue.js budeme ignorovat většinu konfiguračních souborů, abychom se mohli soustředit na strukturu aplikace:

Nejprve máme soubor plugin.php, který je vstupním bodem pro skutečný plugin. Tady máme hlavní Zapojit třída. Zde jsou zahrnuty a spuštěny hlavní komponenty aplikace.

Dále je zde soubor package.json, ve kterém jsou definovány všechny závislosti a spoustu dalších informací o projektu. Část, ve které by vás mohl zajímat, žije pod "skripty" pole. Tam máte všechny příkazy, které můžete spustit s předponou npm run. Nejdůležitější by teď měly být npm run dev (který vytváří aplikaci pro vývoj) a npm run build (které byste měli spustit, jakmile budete připraveni nasadit vaši aplikaci pro výrobu). Ostatní příkazy sousedí s těmito dvěma nebo dělají jiné věci, které byste si v tuto chvíli nemuseli dělat starosti.

Uvnitř adresáře obsahuje tři soubory:

  • Třída rest.php v tuto chvíli nedělá nic, ale už máte strukturu pro přidání vašich cest RestAPI
  • Třída asset.php zpracovává enqueueing stylů a skriptů. Zde je soubor JavaScript lokalizován, aby předal počáteční data z PHP naší aplikaci Vue. V současné době jsou odesílány pouze dva texty, ale můžete zahrnout cokoli, co chcete.
  • Soubor admin.php je ten, který se stará o přidání nové stránky na řídicí panel a vykreslení skutečné stránky pluginu. Všimnete si, že samotná aplikace se vykreslí stejně jako dvě prázdné značky uvnitř funkce plugin_page (). Je to proto, že JavaScript načte skutečné vykreslení aplikace po načtení.

V adresáři děl najdete další čtyři adresáře:

  • Adresář src – zdrojové soubory pro naši aplikaci Vue, o které budeme mluvit později.
  • Adresář scss – soubory stylů SCSS, ze kterých vytváříme šablonu stylů CSS.
  • Adresář js – transpilovaný kód, který je generován z našich souborů v adresáři src.
  • Adresář css – zkompilovaný styl ze souborů SCSS.

Adresář src a soubory šablony Vue

Uvnitř tohoto adresáře jsou dva soubory: main.js a App.vue. Soubor main.js je vstupním bodem aplikace. Připojí komponentu aplikace Vue k prvku DOM s odpovídajícím id.

/ * jshint esversion: 6 * /
importovat Vue z ‘vue’
importovat aplikaci z ‘./App.vue’

window.addEventListener (‘load’, function () {
new Vue ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
komponenty: {App},
render: (h) => h (aplikace)
})
})

Skutečné označení aplikace je uvnitř šablony App.vue:

/ * jshint esversion: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * globální MVDP * /
exportovat výchozí {
data () {
vrátit se {
řetězce: MVDP.strings
}
},
jméno: ‘App.vue’
}

Uvnitř úryvku můžete vidět výše, že používáme řetězce, které jsme lokalizovali ve třídě Aktiva. Jednou z velkých funkcí Vue je, že kód komponenty je přehledně uspořádán do šablony, skriptu a stylu, což usnadňuje pochopení struktury.

To je vše, nyní máte solidní výchozí bod pro vše, co chcete dále rozvíjet pomocí Vue.js! Doufám, že tento tutoriál Vue.js byl užitečný.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení, prezentace a úpravy Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector