PolarisでVue.jsShopifyフロントエンドアプリを構築する方法

公開: 2019-06-17

注：この記事は、この記事で作成したLaravelアプリの上にVue.jsシングルページアプリを構築することについてです。これを読む前に、Laravelを使用したアプリの構築に関する以前の記事を読んだことを確認してください。これは、既存のコードを使用するためです。

Vue.jsとは何ですか？

Vue.jsはJavaScriptフロントエンドフレームワークであり、Reactなどの同様のフレームワークに匹敵し、元々はAngularJSから派生しています。他のフレームワークと比較して、やや軽量になるように設計されているため、必要な場合にのみプレゼンテーションレイヤーとして使用できますが、完全な状態管理で大規模にスケーリングしたり、Vueなどのフレームワークを使用したりすることもできますNuxt.jsとして。 Vue.jsの詳細については、こちらをご覧ください。

Polarisとは何ですか？

PolarisはShopifyのUIデザインフレームワークであり、BootstrapやSemanticUIなどの他のUIフレームワークに匹敵します。 Eastside Coには、アプリで一貫したUIを実現するためのライブラリのVue.jsポートがあります。

コンパイル用のVue.jsの設定

VueにはLaravelが付属していますが、開発を容易にするカスタマイズがいくつかあります。 Laravelには、WebpackのきちんとしたラッパーであるLaravelMixが付属しています。 Webpackは、すべてのフロントエンドアセットを、クライアントのブラウザーに提供したいものにコンパイルします。Laravelには、多くのデフォルトが組み込まれた実装が付属しています。 Webpackの出力を少し最適化しましょう。プロジェクトのルートでwebpack.mix.jsを開きます。次のように変更します。

 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” });

ここでは、importステートメントで使用するためにresources / Assets / jsフォルダー内のファイルをエイリアスし、JavaScriptで完全なファイル名を使用する必要がないように.vueおよび.js拡張子を認識するようにwebpackに指示しました。 devtoolオプションを使用すると、wepackはコンパイル済みJSのソースマップを生成して、ブラウザーでのデバッグを高速化できます。

これで、npmを実行してフロントエンドの依存関係をインストールし、サーバーを実行してJavaScriptファイルへの変更を監視できます。ターミナルに向かい、次のように入力します。

 Npm install Npm run dev

次に、ベースのLaravelルートをVueアプリに接続する必要があります。

LaravelでのVue.jsのセットアップ

LaravelからVueまで適切な足場を取得するには、少し調整する必要があります。最初に行う必要があるのは、VueをベースのTwigテンプレートにインポートしてから、アプリのエントリポイントを作成することです。

混乱しないように、新しいルート、コントローラーメソッド、小枝テンプレートを作成しましょう。

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

VueはLaravelで作成したエンドポイントを使用するため、ShopifyAPIを廃止しましたが、これは後で使用されます。次に、Vueをvueappという名前の新しいTwigテンプレートに接続する必要があります。次のファイルを作成します。

 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>

CSRFトークンは重要です-クロスサイトリクエストフォージェリを防ぐために、LaravelはトークンをVueに渡します。ここでは他にもいくつかのことが起こっています。まず、 <div id=”app”>はVueをバインドするdivタグであり、 <app-entry>はまだ構築していないカスタムVueコンポーネントです。間もなく構築します。

Vue足場の構築

次に、アプリのアプリエントリポイントを構築する必要があります。これはコンポーネントのように扱っていますが、Vueの残りの部分のフロントエンドエントリポイントであるため、ベイクインされたコンポーネントフォルダーの外に配置します。新しいファイルを作成します。

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

したがって、最後の部分は、 <app-entry>コンポーネントをVueブートローダーに登録すること<app-entry> 。に行く

resources / js / app.js

ここには、Laravelボイラープレートコードからのコメントがたくさんあります。すべてのコードを削除して、次のように置き換えてください。

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

これで、エントリコンポーネントが読み込まれ、Vueが起動され、dividアプリにバインドされました。ブラウザにルートをロードします。

http：// localhost：8000 / vueapp

そして、ブラウザのdevtoolsを開くと、vueが初期化されていることがわかります。稼働中です！

APIエンドポイントの作成

これで、製品のリストをレンダリングする新しいコンポーネントを作成するエントリポイントができました。フロントエンドコンポーネントを作成する前に、ShopifyのAPIから効果的にプロキシとなるAPIエンドポイントを作成する必要があります。

Laravelには、API呼び出し用に自動的に構成された/ api /ベースルートが付属しており、ロジックはHTTPルートから分離されています。次の行を追加します。

 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; }

エンドポイントに移動すると、データが返されます。

APIエンドポイントについては以上です。これは基本的なガイドであるため、承認は使用していませんが、基本的なベアラーを含むカスタム認証の実装の詳細については、https：//laravel.com/docs/5.7/authenticationを確認してください。トークンとoAuth。

コンポーネントの作成とAPIデータの取得

製品をレンダリングするコンポーネントを作成しましょう-コンポーネントディレクトリに新しいファイルを作成します。

 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>

次に、コンポーネントをVueに登録します。

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

そして、コンポーネントをアプリテンプレートにドロップします。

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

APIエンドポイントから製品をフェッチしてループする前に、Vueテンプレートで説明することがいくつかあります。まず、 <script>タグの背後にあるロジック-各Vueコンポーネントにはライフサイクルがあり、さまざまな段階で利用でき、イベントを発行したり、ウォッチャーを設定したりできます。必要なものはすべてここにコーディングできます。

コンポーネントのコーディングについて詳しくは、こちらをご覧ください。まず、data（）メソッドを追加するだけです。このメソッドは、コンポーネントに使用またはバインドするデータを返します。ここでキーに名前を付け、それを空白の文字列として作成しました。これは、モジュールがライフサイクルにロードされた後にフェッチでコーディングすると、コンポーネントの製品が格納される場所になるためです。

このデータを入力するために、created（）メソッドがライフサイクルで実行されるときに呼び出されるaxiosを使用してメソッドを追加します。

 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>

これで、apidataの下のテンプレートで製品を使用できるようになります-Vueのv-forループを使用して、テンプレート内の配列を反復処理できます。

Polarisでのレンダリング

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

ページとビンゴをロードしてください！レンダリングされた製品は次のとおりです。

Vueで開発する場合、Vuedevtools拡張機能はデバッグに非常に役立ちます。これらのツールはここで見ることができます。

devtoolsを使用すると、apidataデータオブジェクトが取得した値（つまり、配列にキャストされたAPIの応答）を確認できます。

ポラリスに引っ掛かる

したがって、最後の部分は、EastsideCoのVuePolarisポートを使用して製品をレンダリングすることです。 Polarisライブラリをnpm経由でインストールします。

 Npm install @eastsideco/polaris-vue

次に、それを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', });

これで、polarisという名前のカスタムHTMLタグにアクセスできるようになります。移植されたタグの完全なリストは、http：//demo.polaris-vue.eastsideco.io/のドキュメントページで確認できます。

テンプレートは次のようにリファクタリングされました。

 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>

ここではかなり多くのことが起こっているので、それを分解しましょう-

開始<div>は単なるコンテナです。これは、Vue.jsコンポーネントには常にルート要素が必要なためです。次に、 <polaris-page>を使用してページのCSSコンテナを定義します。

The レイアウトシステムは、前述のドキュメントで非常によく定義されています。

ただし、 <polaris-resource-list>はより複雑なコンポーネントです。渡された小道具を使用します。この場合、作成したAPIエンドポイントへの応答を渡します。リソースリストにはスコープスロットがあり、その中で<polaris-resource-list-item>ます。スロット内で、別のスロットを定義します-「アイテム」（簡単な説明としてforeachループの反復と考えてください）。次に、スロットのスコープ全体（apidata）がスロットの小道具として名前が付けられます。したがって、この時点で現在のイテレーションのプロパティにアクセスするには、props.itemを使用します。 attribute-oneやmediaなどのこれらの属性は、コンポーネントによって解析され、ポラリスライブラリにレンダリングされます。結果は基本的な製品リストです。

そして、VuePolarisに接続されている製品のリストがあります。

このデモコードの作業コピーは、https：//github.com/EastsideCo/polaris-vueのリポジトリにあります。

Eastside Coにはアプリ開発チームがありますので、ご不明な点がございましたらお気軽にお問い合わせください。