हम Nuxt.js, GraphQL, Strapi और स्ट्राइप का उपयोग करके खाद्य वितरण सेवा का एक क्लोन बनाते हैं। भाग 1/7

परिचय

• स्ट्रैपी एक पूरी तरह से मुफ्त परियोजना है।
• आप अपने सर्वर पर स्ट्रैपी स्थापित कर सकते हैं, इस प्रकार डेटा का नियंत्रण खोए बिना।
  
• प्लगइन प्रणाली के लिए पूरी तरह से अनुकूलन और विस्तार योग्य धन्यवाद।

Nuxt स्थापित करें

yarn global add @vue/cli  
# 
npm install -g @vue/cli  

mkdir deliveroo-clone-tutorial

cd deliveroo-clone-tutorial

yarn create nuxt-app frontend  
# 
npx create-nuxt-app frontend  
# 
npm init nuxt-app frontend

? Choose the package manager: Yarn

cd frontend && yarn dev 

UIkit स्थापित करें

yarn add uikit 

import Vue from 'vue'

import UIkit from 'uikit/dist/js/uikit-core'  
import Icons from 'uikit/dist/js/uikit-icons'

UIkit.use(Icons)  
UIkit.container = '#__nuxt'

Vue.prototype.$uikit = UIkit

...
css: [  
  "uikit/dist/css/uikit.min.css",
  "uikit/dist/css/uikit.css",
],

/*
**      
*/
plugins: [  
  { src: '~/plugins/uikit.js', ssr: false }
],
...

एक हेडर घटक बनाएँ

<template>  
  <client-only>
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
              <li class="uk-active">
                <router-link tag="a" class="navbar-brand" to="/" exact>Deliveroo clone</router-link>
              </li>
              <li>
                <router-link tag="a" class="navbar-brand" to="/restaurants" exact>Restaurants</router-link>
              </li>
            </ul>
        </div>
    </nav>
  </client-only>
</template>

<template>  
  <div>
    <Header />
    <div class="uk-section uk-section-default">
      <div class="uk-container uk-container-large">
        <nuxt />
      </div>
    </div>
  </div>
</template>

<script>  
import Header from '~/components/Header.vue'  
export default {  
  components: {
    Header
  }
}
</script>

<template>  
  <div>
    <img src="https://media.giphy.com/media/zBL9j9oiR3VM4/giphy.gif" class="uk-position-center" alt="">
  </div>
</template>  

• स्थानीयहोस्ट पर परिवर्तनों को देखने के लिए इस पृष्ठ को पुनः लोड करें : 3000
• यदि आपने कमांड को पहले रोका था तो यार्न यार्न या npm रन देव चलाएँ

Strapi

स्ट्रैपी स्थापित करें

yarn create strapi-app backend --quickstart  
# 
npx create-strapi-app backend --quickstart  

strapi develop 

एक व्यवस्थापक बनाएँ