Wir erstellen einen Klon des Lebensmittel-Lieferservices mit Nuxt.js, GraphQL, Strapi und Stripe. Teil 1/7

Einführung

• Strapi ist ein völlig kostenloses Projekt.
• Sie können Strapi auf Ihrem Server installieren, ohne die Kontrolle über die Daten zu verlieren.
  
• Vollständig anpassbar und erweiterbar dank des Plugin-Systems.

Installieren Sie 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 

Installieren Sie 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 }
],
...

Erstellen Sie eine Header-Komponente

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

• Laden Sie diese Seite neu, um die Änderungen auf localhost: 3000 anzuzeigen
• Führen Sie yarn dev oder npm run dev aus, wenn Sie den Befehl zuvor gestoppt haben

Strapi

Installieren Sie Strapi

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

strapi develop 

Erstellen Sie einen Administrator