Jak zbudować aplikację Vue.js Shopify Frontend z Polaris?

Opublikowany: 2019-06-17

Uwaga: ten artykuł dotyczy tworzenia aplikacji jednostronicowej Vue.js na bazie aplikacji Laravel utworzonej w tym artykule. Zanim to przeczytasz, upewnij się, że przeczytałeś poprzedni artykuł o tworzeniu aplikacji z Laravel, ponieważ będziemy używać tego istniejącego kodu.

Co to jest Vue.js?

Vue.js to front-endowy framework JavaScript, porównywalny z podobnymi frameworkami, takimi jak React i pierwotnie wywodzący się z AngularJS. W porównaniu z innymi frameworkami, jest nieco lżejszy, dzięki czemu możesz używać go tylko jako warstwy prezentacji tylko wtedy, gdy chcesz - ale możesz również masowo go skalować z pełnym zarządzaniem stanem lub użyć frameworka nad Vue, takiego jako Nuxt.js. Więcej informacji o Vue.js znajdziesz tutaj.

Co to jest Polaris?

Polaris to platforma projektowania interfejsu użytkownika Shopify, porównywalna z innymi strukturami interfejsu użytkownika, takimi jak Bootstrap lub SemanticUI. W Eastside Co mamy port biblioteki Vue.js, który zapewnia spójny interfejs użytkownika w naszych aplikacjach.

Konfigurowanie Vue.js do kompilacji

Vue jest dostarczany z Laravel po wyjęciu z pudełka, ale istnieje kilka dostosowań, które ułatwią rozwój. Laravel jest dostarczany z Laravel Mix, który jest zgrabnym opakowaniem wokół Webpacka. Webpack kompiluje wszystkie zasoby frontendowe do tego, co chcesz udostępnić przeglądarce klienta — Laravel zawiera implementację tego z wieloma wbudowanymi ustawieniami domyślnymi. Zoptymalizujmy trochę wyjście Webpacka. Otwórz webpack.mix.js w katalogu głównym projektu. Zmień to na:

 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ resolve: { extensions: [ '.js', '.vue', ], alias: { '@': path.resolve(__dirname, 'resources/assets/js'), }, }, devtool: “inline-source-map” });

Tutaj powiedzieliśmy webpackowi, aby aliasował pliki w folderze resources/assets/js do użycia w instrukcjach importu i rozpoznawał rozszerzenia .vue i .js, dzięki czemu nie musimy używać pełnych nazw plików w JavaScript. Opcja devtool sprawia również, że wepack generuje mapy źródeł dla naszego skompilowanego JS, aby przyspieszyć debugowanie w przeglądarce.

Możemy teraz uruchomić npm, aby zainstalować nasze zależności front-endu i uruchomić serwer, aby obserwować zmiany w naszych plikach JavaScript. Udaj się do terminalu i wpisz:

 Npm install Npm run dev

Teraz musimy podłączyć naszą podstawową trasę Laravel do naszej aplikacji Vue.

Konfigurowanie Vue.js w Laravel

Musimy trochę poprawić, aby uzyskać przyzwoite rusztowanie z Laravela do Vue. Pierwszą rzeczą, którą musimy zrobić, to zaimportować Vue do podstawowego szablonu Twig, a następnie utworzyć punkt wejścia dla naszej aplikacji.

Aby nie pomylić rzeczy, stwórzmy nową trasę, metodę kontrolera i szablon gałązki.

 routes/web.php Route::get('/vueapp', 'ShopifyController@vueapp'); app/Http/Controllers/ShopifyController.php public function vueapp() { return view('vueapp'); }

Ponieważ Vue będzie korzystać z punktu końcowego, który tworzymy w Laravel, porzuciliśmy ShopifyAPI — ale będzie to używane później. Teraz musimy połączyć Vue z naszym nowym szablonem Twig, który nazwaliśmy vueapp. Utwórz następujący plik:

 resources/views/vueapp.twig <!DOCTYPE html> <html> <head> <title>My VueJs app</title> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div> <app-entry></app-entry> </div> <script src="{{ asset('js/app.js') }}"></script> </body> </html>

Token CSRF jest ważny — Laravel przekazuje token do Vue, aby zapobiec fałszowaniu żądań między witrynami. Dzieje się tu kilka innych rzeczy — po pierwsze, <div id=”app”> to tag div, z którym wiążemy Vue, a <app-entry> to niestandardowy komponent Vue, którego jeszcze nie zbudowaliśmy, więc wkrótce to zbudujemy.

Budowanie rusztowania Vue

Następnie musimy zbudować nasz punkt wejścia aplikacji dla naszej aplikacji. Traktujemy go jak komponent, ale umieszczamy go poza folderem wbudowanych komponentów, ponieważ jest to punkt wejścia frontonu dla reszty Vue. Utwórz nowy plik:

 resources/js/AppEntry.vue <template> <p>App Entry Point</p> </template> <script> export default { mounted() { console.log('Rendered app entry point') } } </script>

Tak więc ostatnią częścią jest zarejestrowanie komponentu <app-entry> w bootloaderze Vue. Zmierzać do

zasoby/js/app.js

Jest tu dużo komentarzy z kodu wzorcowego Laravela - usuń cały kod i zastąp go następującym:

 require('./bootstrap'); window.Vue = require('vue'); Vue.component('app-entry', require('./AppEntry.vue').default); const app = new Vue({ el: '#app', });

Tak więc nasz komponent wejściowy został załadowany, a Vue został uruchomiony, będąc powiązanym z aplikacją div id. Załaduj trasę w przeglądarce:

http://localhost:8000/vueapp

I widzimy, że przy otwartych narzędziach programistycznych przeglądarki, vue jest inicjowane. Działamy!

Tworzenie punktu końcowego API

Teraz mamy punkt wejścia, utworzymy nowy komponent, który wyrenderuje listę produktów. Zanim będziemy mogli utworzyć komponent frontendu, musimy utworzyć punkt końcowy API, który będzie faktycznie serwerem proxy z API Shopify.

Laravel jest dostarczany z automatycznie konfigurowanym /api/ podstawowym rootem dla wywołań API, z logiką oddzieloną od tras HTTP. Dodaj następujący wiersz:

 routes/api.php Route::get('/products', 'ShopifyController@products'); We've not created the 'products' method in the ShopifyController, so let's create it: app/Http/Controllers/ShopifyController.php public function products() { $shopifyApi = app('ShopifyAPI'); $products = $shopifyApi->call('GET', '/admin/products.json'); return (array) $products; }

Przejdź do punktu końcowego i powinieneś odzyskać dane:

To wszystko w przypadku punktu końcowego interfejsu API — nie używamy żadnej autoryzacji, ponieważ jest to podstawowy przewodnik, ale możesz sprawdzić https://laravel.com/docs/5.7/authentication, aby uzyskać więcej informacji na temat niestandardowych implementacji uwierzytelniania, w tym basic, bearer tokeny i oAuth.

Tworzenie komponentu i pobieranie danych API

Stwórzmy komponent, w którym będziemy renderować produkty - stwórzmy nowy plik w katalogu components:

 resources/js/components/ProductComponent.vue <template> <div id=”root element”>Vue components always need one root element</div> </template> <script> export default { mounted() { console.log('Component loaded') }, data() { return { apidata: "" } }, } </script>

Teraz zarejestruj komponent w Vue:

 resources/js/app.js Vue.component('shopify-products', require('./components/ProductsComponent.vue').default);

I upuść komponent do naszego szablonu aplikacji:

 <template> <div> <shopify-products></shopify-products> </div> </template>

Jest kilka rzeczy do wyjaśnienia z szablonem Vue, zanim będziemy mogli pobrać produkty z punktu końcowego interfejsu API i zapętlić je. Po pierwsze, logika kryjąca się za tagiem <script> - każdy komponent Vue ma cykl życia, który można wykorzystać na różnych etapach i który umożliwia emitowanie zdarzeń, ustawianie obserwatorów; wszystko, czego potrzebujesz, możesz zakodować tutaj.

Więcej informacji o kodowaniu komponentów znajdziesz tutaj. Zaczęliśmy od dodania metody data(), która zwraca dane, których będziesz używać lub łączyć z komponentem. Nazwaliśmy klucz w tym miejscu apidata i utworzyliśmy go jako pusty ciąg — powodem tego jest to, że będzie to miejsce, w którym będą przechowywane produkty dla komponentów — gdy tylko zakodujemy w pobieraniu po załadowaniu modułu w cyklu życia.

Aby wypełnić te dane, dodamy metodę, używając axios, która zostanie wywołana, gdy metoda created() zostanie wykonana w cyklu życia.

 resources/js/components/ProductComponent.vue <script> export default { mounted() { console.log('Component loaded') }, created() { this.fetchProducts() }, data() { return { apidata: "" } }, methods: { fetchProducts() { axios.get('/api/products').then(response => { this.apidata = response.data.products }) } } } </script>

Produkty będą teraz dostępne w szablonie pod apidata - korzystając z pętli v-for w Vue, możemy iterować po tablicy w szablonie:

Renderowanie w Polaris

 <template> <div> <div class="card" v-for="product in apidata"> <h5>{{ product.title }}</h5> <p>{{ product.body_html }}</p> </div> </div> </template>

Załaduj stronę i bingo! Oto nasze renderowane produkty:

Podczas programowania w Vue rozszerzenie Vue devtools jest niezwykle przydatne do debugowania. Możesz zobaczyć te narzędzia tutaj.

Jeśli użyjemy devtools, możemy zobaczyć wartość, jaką przyjął nasz obiekt danych apidata (tj. odpowiedź API, która została rzucona na tablicę):

Podłączanie Polaris

Naszą ostatnią częścią jest wykorzystanie portu Vue Polaris firmy EastsideCo do renderowania naszych produktów. Instalujemy bibliotekę Polaris przez npm:

 Npm install @eastsideco/polaris-vue

Następnie łączymy go z naszą aplikacją Vue:

 resources/js/app.js require('./bootstrap'); import PolarisVue from '@eastsideco/polaris-vue/lib/polaris-vue'; import PolarisVueCss from '@eastsideco/polaris-vue/lib/polaris-vue.css'; window.Vue = require('vue'); Vue.component('app-entry', require('./AppEntry.vue').default); Vue.component('shopify-products', require('./components/ProductsComponent.vue').default); Vue.use(PolarisVue); const app = new Vue({ el: '#app', });

Będziemy mieć teraz dostęp do niestandardowych tagów HTML o nazwach polaris — pełną listę przeniesionych tagów można zobaczyć na stronie z dokumentami pod adresem http://demo.polaris-vue.eastsideco.io/

Nasz szablon został zrefaktoryzowany i wygląda tak:

 resources/js/components/ProductsComponent.vue <template> <div> <polaris-page> <polaris-card sectioned title="My Shopify Vue App"> Uses EastsideCo port of Polaris to Vue </polaris-card> <polaris-card sectioned> <polaris-layout-section> <polaris-resource-list :items="apidata"> <template slot="item" slot-scope="props"> <polaris-resource-list-item :attribute-one="props.item.title" :attribute-two="props.item.created_at" :media="props.item.image"> </polaris-resource-list-item> </template> </polaris-resource-list> </polaris-layout-section> </polaris-card> </polaris-page> </div> </template>

Dużo się tu dzieje, więc podzielmy to -

Otwierający <div> jest po prostu kontenerem - to dlatego, że komponenty Vue.js zawsze potrzebują elementu głównego. Następnie definiujemy kontener CSS dla strony za pomocą <polaris-page> .

ten układ układu jest dość dobrze zdefiniowany we wspomnianych wcześniej dokumentach.

<polaris-resource-list> jest jednak bardziej złożonym komponentem - pobiera przekazaną właściwość, którą w tym przypadku przekazujemy w odpowiedzi do utworzonego przez nas punktu końcowego API. Lista zasobów ma wtedy miejsce w zakresie, w którym tworzymy <polaris-resource-list-item> . W slocie definiujesz inny slot - „element” (pomyśl o tym jako o iteracji pętli foreach jako o prostym wyjaśnieniu), a następnie cały zakres slotu (który jest apidata) jest nazywany jako jego właściwości. Tak więc, aby w tym momencie uzyskać dostęp do aktualnych właściwości iteracji, używamy props.item. Te atrybuty, takie jak atrybut jeden i nośnik, są analizowane przez komponent i renderowane w bibliotece polaris. Rezultatem jest podstawowa lista produktów:

I oto jesteśmy - lista produktów wpiętych do Vue Polaris.

Roboczą kopię tego kodu demonstracyjnego można znaleźć w naszym repozytorium pod adresem https://github.com/EastsideCo/polaris-vue.

W Eastside Co mamy zespół ds. rozwoju aplikacji, więc jeśli masz jakiekolwiek pytania, nie wahaj się z nami skontaktować!