Polaris로 Vue.js Shopify 프론트엔드 앱을 구축하는 방법

게시 됨: 2019-06-17

참고: 이 기사는 이 기사에서 만든 Laravel 앱 위에 Vue.js 단일 페이지 앱을 빌드하는 방법에 대한 것입니다. 이 글을 읽기 전에 기존 코드를 사용할 것이므로 Laravel로 앱을 빌드하는 방법에 대한 이전 기사를 읽었는지 확인하십시오.

Vue.js는 무엇입니까?

Vue.js는 JavaScript 프론트 엔드 프레임워크로 React와 같은 유사한 프레임워크에 필적하며 원래 AngularJS에서 파생되었습니다. 다른 프레임워크와 비교하여 약간 더 가볍게 설계되어 원하는 경우에만 프레젠테이션 레이어로 사용할 수 있습니다. 그러나 전체 상태 관리로 대규모로 확장하거나 Vue 위에 프레임워크를 사용할 수도 있습니다. Nuxt.js로. Vue.js에 대한 자세한 정보는 여기에서 확인할 수 있습니다.

폴라리스란?

Polaris는 Bootstrap 또는 SemanticUI와 같은 다른 UI 프레임워크와 비교할 수 있는 Shopify의 UI 디자인 프레임워크입니다. Eastside Co에는 앱의 일관된 UI를 위한 라이브러리의 Vue.js 포트가 있습니다.

컴파일을 위한 Vue.js 설정

Vue는 Laravel과 함께 기본적으로 제공되지만 개발을 더 쉽게 해줄 몇 가지 사용자 정의가 있습니다. Laravel은 Webpack을 둘러싼 깔끔한 래퍼인 Laravel Mix와 함께 제공됩니다. 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 확장자를 인식하도록 지시했습니다. devtool 옵션을 사용하면 wepack이 컴파일된 JS에 대한 소스 맵을 생성하여 브라우저에서 더 빠르게 디버깅할 수 있습니다.

이제 npm을 실행하여 프런트 엔드 종속성을 설치하고 서버를 실행하여 JavaScript 파일의 변경 사항을 감시할 수 있습니다. 터미널로 이동하여 다음을 입력합니다.

 Npm install Npm run dev

이제 기본 Laravel 경로를 Vue 앱에 연결해야 합니다.

라라벨에서 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의 나머지 부분에 대한 프론트 엔드 진입점이므로 베이크인 컴포넌트 폴더 외부에 둡니다. 새 파일 만들기:

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

그래서 마지막 부분은 Vue 부트로더에 <app-entry> 컴포넌트를 등록하는 것입니다. 로 향하다

리소스/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가 부팅되어 div id 앱에 바인딩됩니다. 브라우저에서 경로를 로드합니다.

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() 메서드를 추가하는 것으로 시작했습니다. 여기에서 키 이름을 apidata로 지정하고 빈 문자열로 만들었습니다. 그 이유는 모듈이 수명 주기에서 로드된 후 가져오기에서 코딩하면 구성 요소에 대해 제품이 저장되는 위치에 있기 때문입니다.

이 데이터를 채우기 위해 axios를 사용하여 메서드를 추가할 것입니다. 이 메서드는 수명 주기에서 created() 메서드가 실행될 때 호출됩니다.

 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에서 개발할 때 Vue devtools 확장은 디버깅에 매우 유용합니다. 여기에서 이러한 도구를 볼 수 있습니다.

devtools를 사용하면 apidata 데이터 객체가 취한 값을 볼 수 있습니다(즉, 배열로 캐스트된 API 응답).

폴라리스에서 후킹

따라서 마지막 부분은 EastsideCo의 Vue Polaris 포트를 사용하여 제품을 렌더링하는 것입니다. npm을 통해 Polaris 라이브러리를 설치합니다.

 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 컨테이너를 정의합니다.

그만큼 레이아웃 시스템은 앞서 언급한 문서에 아주 잘 정의되어 있습니다.

그러나 <polaris-resource-list> 는 더 복잡한 구성 요소입니다. 전달된 prop이 필요하며 이 경우 우리가 생성한 API 끝점에 대한 응답을 전달합니다. 그런 다음 리소스 목록에는 범위가 지정된 슬롯이 있으며 여기에서 <polaris-resource-list-item> 을 생성합니다. 슬롯 내에서 다른 슬롯 - "항목"을 정의한 다음(이를 간단한 설명으로 foreach 루프에 대한 반복으로 생각하십시오) 슬롯의 전체 범위(apidata)가 슬롯의 소품으로 명명됩니다. 따라서 이 시점에서 현재 반복의 속성에 액세스하려면 props.item을 사용합니다. 속성 1 및 미디어와 같은 이러한 속성은 구성 요소에 의해 구문 분석되고 polaris 라이브러리에서 렌더링됩니다. 결과는 기본 제품 목록입니다.

Vue Polaris에 연결된 제품 목록이 있습니다.

https://github.com/EastsideCo/polaris-vue의 리포지토리에서 이 데모 코드의 작업 복사본을 찾을 수 있습니다.

Eastside Co에는 앱 개발 팀이 있으므로 질문이 있는 경우 주저하지 말고 연락하세요!