So erstellen Sie mit Docker ~ Vue ~ eine [TypeScript + Vue + Express + MySQL] -Umgebung

Inhalt

Dieser Artikel untersucht Vue, möchte aber eine App basierend auf TypeScript erstellen! Es ist ein Inhalt, eine Umgebung für diejenigen, die sagen, von Grund auf neu zu erstellen! Übrigens werde ich es mit Docker erstellen und eine Anwendung erstellen, die unter der Containerumgebung ausgeführt wird!

In Bezug auf die Konfiguration werde ich eine Umgebung anstreben, in der Docker + Vue.js + Express (Node.js) + MySQL auf TypeScript basiert und über Modulerweiterbarkeit verfügt!

• Dies ist der erste Artikel, daher denke ich, dass es einige Punkte gibt, die nicht erreicht werden können, aber ich würde es begrüßen, wenn Sie freundlich darauf hinweisen könnten.

Zielzustand

1. Anwendungsbehälter

• Vue + Vuex + Vuetify + TypeScript

2. API-Servercontainer

• Express + Sequelize + TypeScript

3. Datenbankcontainer

• MySQL

"Vue-> Vuex-> HTTP-Kommunikation (Axios) -> API (Express) -> MySQL-Datenerfassung (Sequelize) -> Speicherantwort (Express) -> Vue" Es wird der Fluss sein.

Zielperson

--Docker, Docker-Compose ist bereits installiert (verfügbar)

• Verstehen Sie die Grundlagen von JavaScript / Vue.js

Der Zweck besteht darin, schnell eine Umgebung auf Docker zu erstellen, und Docker wird nicht im Detail behandelt. Was ist Docker überhaupt? Wir empfehlen Ihnen, auf den folgenden Artikel zu verweisen. [Abbildung] Das gesamte Bild von Docker verstehen - Teil 1-

Arbeitsablauf

Vue Edition

1. Anwendungscontainer erstellen
2. Erstellen Sie eine Vue-App auf einem Container
3. Automatisieren Sie die App-Ausführung, wenn der Container gestartet wird
4. Einführung der Hauptbibliotheken von Vue
5. Vuetify eingeführt
6. Erstellen Sie eine Zähler-App zum Testen

MySQL Edition

1. Erstellen Sie einen DB-Container
2. Eingabe von Testdaten
3. Zugriff auf MySQL

Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ MySQL Edition ~

Express edition

1. Erstellen Sie einen API-Container
2. Einführung von ts-node / nodemon
3. Express-Serveraufbau
4. Routing-Einstellungen
5. API-Handler-Einstellungen
6. Erstellen Sie eine API-Vorlage

Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ Express ~

Sequelize Edition

1. Richten Sie ein Netzwerk zwischen Containern ein
2. Sequelize eingeführt
3. Modellerstellung
4. Vervollständigen Sie die GetTests-API
5. Rufen Sie die API mit Axios von der Vorderseite aus auf
6. Binden und rendern Sie die Antwort an Vuex

So erstellen Sie mit Docker ~ Sequelize ~ eine Umgebung aus [TypeScript + Vue + Express + MySQL]

1. Erstellen Sie einen Anwendungscontainer

Erstellen Sie zunächst eine Datei, um einen Container mit Docker-Compose zu erstellen. Erstellen Sie die erforderlichen Dateien mit der folgenden Konfiguration.

root
├─ docker
│    └─ app
│        └─ Dockerfile
└─ docker-compose.yml

docker-compose.yml

version: "3"
services:
  app:
    container_name: app_container
    build: ./docker/app
    ports:
      - 8080:8080
    volumes:
      - ./app:/app
    stdin_open: true
    tty: true
    environment:
      TZ: Asia/Tokyo

Dies ist die grundlegende Docker-Compose-Konfigurationsdatei. Wir werden später API-Server-Container und DB-Container hinzufügen, aber wir werden nur einmal APP-Container erstellen.

Dockerfile

FROM node:12.13-alpine

RUN yarn global add @vue/cli

WORKDIR /app

Dieses Mal werden wir leichtes alpines Bild als Basisbild verwenden. Führen Sie eine globale Installation durch, da vue-cli im Container verwendet wird.

Container bauen

$ docker-compose build

Erstellen Sie das Bild unter dem zuvor erstellten Designdokument

Container / Start

$ docker-compose up -d

Starten Sie tatsächlich den gebauten Container. Fügen Sie -d hinzu, um im getrennten Modus (Hintergrund) zu starten.

Überprüfen Sie den laufenden Container

$ docker ps

Das folgende Ergebnis ist die Ausgabe. Überprüfen Sie also, ob es tatsächlich gestartet wurde.

CONTAINER ID   IMAGE   COMMAND   CREATED   STATUS    PORTS     NAMES
//OK, wenn der erstellte Container hier angezeigt wird

2. Starten Sie die Vue-App auf dem Container

Nachdem Sie einen Basiscontainer haben, können Sie tatsächlich in den Container gehen und Ihre App erstellen.

Zugang zum Container

$ docker exec -it app_container sh

/app # 　//In diesem Fall können Sie auf den Container zugreifen

Vue App Erstellung

$ vue create app

Manuelle Auswahl Mit TypeScript Mit Router Mit Vuex Babel ** Keine **

Die Version ist 2.x. Verwenden Sie eine Komponentensyntax im Klassenstil? Ja ** * Dies ist wichtig ** Garn ** * Ich werde Garn für die Verpackung verwenden. ** **. Der Rest ist Ihre Wahl.

Anlaufen

$ cd app
$ yarn serve

Wenn Sie auf localhost: 8080 zugreifen und es angezeigt wird, ist es OK!

Bis zu diesem Punkt haben Sie eine App im Container erstellt und die App im Container ausgeführt. Da diese Arbeit jedes Mal mühsam ist, stellen wir die Anwendung so ein, dass sie beim Starten des Containers automatisch ausgeführt wird.

Stoppen Sie die App einmal

$ controll + c

Raus aus dem Container

$ exit

Behälter stoppen

$ docker-compose stop

3. Automatisieren Sie die App-Ausführung, wenn der Container gestartet wird

Verzeichnisstruktur ändern

Das App-Verzeichnis direkt unter root ist ärgerlich, also gehen Sie bitte irgendwohin.

Before

root
├─ app                //Hier portiert(Dieser Typ wird gelöscht)
│    └─ app           //Jedes dieser Verzeichnisse
│        ├─ node_modules
│        ├─ public
│        ├─ src
│ Andere
│
├─ docker
│    └─ app
│         └─ Dockerfile
└─ docker-compose.yml

After

root     
├─ app     
│   ├─ node_modules
│   ├─ public
│   ├─ src
│ Andere
│
├─ docker
│    └─ app
│         └─ Dockerfile
└─ docker-compose.yml

Startbefehl zur Konfigurationsdatei erstellen hinzugefügt

docker-compose.yml

version: "3"
services:
  app:
    container_name: app_container
    build: ./docker/app
    ports:
      - 8080:8080
    volumes:
      - ./app:/app
    stdin_open: true
    tty: true
    environment:
      TZ: Asia/Tokyo
    command: yarn serve  //Füge diesen Kerl hinzu

Container-Start

$ docker-compose up -d

Wenn Sie in diesem Status auf localhost: 8080 zugreifen und die Anwendung gestartet wird, ist sie erfolgreich! Die App wird gestartet, wenn der Docker-Container ohne Garnaufschlag gestartet wird!

Einführung von hübscher (Favorit)

Ich hasse JavaScript-Semikolons, daher werde ich Prettier einführen, das automatisch formatiert wird. Bitte zögern Sie nicht, diesen Bereich zu nutzen.

Greifen Sie auf den Container zu

$ docker exec -it app_container sh

Schönere Installation

$ yarn add prettier --dev

App erstellen / **. Prettierrc **

{
  "singleQuote": true,
  "semi": false
}

4. Einführung der wichtigsten Vue-Bibliotheken

Eigentlich ist dies diesmal mein Favorit. Während Sie Vue in TypeScript schreiben, werden wir eine Bibliothek vorstellen, die mit einem Dekorator (@) sauber und intuitiv geschrieben werden kann. In Zukunft werden Vue-Dateien mit einigen unbekannten Schreibstilen aufwarten, aber diese Bibliotheken sind nett und ordentlich.

• vue-class-component
• vue-property-decorator
• vuex-class
• vuex-module-decorators

$ yarn add vue-class-component vue-property-decorator vuex-class vuex-module-decorators

Der folgende Artikel ist sehr einfach zu verstehen. Bitte lesen Sie ihn, wenn Sie interessiert sind.

• Vue-Komponente beginnend mit TypeScript (vue-class-component)
• Erster vue-property-decorator (unterstützt auch nuxt)

Bearbeiten Sie App.vue

src/App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
#app {
  width: 95%;
  margin: 0 auto;
}
</style>

Ich möchte die Anzeigekomponente der Routerseite überlassen, also Router-Link löschen und durch Router-Ansicht ersetzen.

Löschen Sie nicht benötigte Dateien

├─ assets
│    └─ logo.ping        //Löschen
├─ components
│     └─ HelloWorld.vue  //Löschen
├─ views                 //Löschen Sie das gesamte Verzeichnis
│      ├─ Home
│      └─ About

Bitte hinterlassen Sie die Dateien, die Sie in Zukunft nicht mehr verwenden werden.

Erstellen Sie Test.vue

/pages/Test.vue

<template>
  <div class="test">
    <h1>Test Page</h1>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Test extends Vue {}
</script>

Erstellen Sie eine Testkomponente, um Folgendes zu überprüfen:

1. Können Sie richtig routen?
2. Kann die Komponente korrekt geladen werden?

Router bearbeiten

/router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Test from '../pages/Test.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Test',
    component: Test,
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

Stellen Sie das Routing so ein, dass die erstellte Testkomponente von der Route aufgerufen wird.

Seitenbestätigung

Wenn Sie neu laden und "Testseite" angezeigt wird, ist es OK! Sie können die Anzahl der Seiten frei erhöhen, indem Sie die URL und die Komponente auf diese Weise verbinden!

5. Vuetify eingeführt

Bibliotheksinstallation

yarn add vuetify
yarn add --dev sass sass-loader fibers deepmerge

Wenn Sie nur vuetify verwenden, tritt ein Fehler auf. Installieren Sie daher auch die erforderlichen Bibliotheken.

Erstellen einer Plug-In-Datei

src/plugins/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Dies ist eine Einstellungsdatei zum Anwenden von Vuetify auf die gesamte App.

Bearbeiten Sie main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify' //hinzufügen
import 'vuetify/dist/vuetify.min.css' //hinzufügen

Vue.config.productionTip = false

new Vue({
  vuetify, //hinzufügen
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

Sie können Vuetify in Ihrer Anwendung verwenden, indem Sie das oben erstellte Plug-In laden.

Bearbeiten Sie App.vue

<template>
  <v-app>  <!--hinzufügen-->
    <div id="app">
      <router-view />
    </div>
  </v-app> <!--hinzufügen-->
</template>

Schließlich ist es in Ordnung, wenn Sie die Ansicht des Hauptteils der Anwendung einschließen.

Bearbeiten Sie Test.vue

<v-btn large color="primary">Prüfung</v-btn>

Wenn die Schaltfläche angezeigt wird, ist die Installation von Vuetify abgeschlossen! Danke für deine harte Arbeit! Danach können Sie die Anzahl der Seiten auf diese Weise frei erhöhen!

6. Erstellen Sie eine Zähler-App zum Testen

Nachdem die Anwendungsvorlage vollständig ist, erstellen wir eine Zählerfunktion, nachdem wir überprüft haben, ob Vuex / Store korrekt verwendet werden kann.

Erstellen Sie Counter.vue

pages/Counter.vue

<template>
  <div class="counter">
    <h1>Counter</h1>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Counter extends Vue {}
</script>

Erstellen einer Zählerseite

--edit router / index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Test from '../pages/Test.vue'
import Counter from '../pages/Counter.vue' //hinzufügen

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Test',
    component: Test,
  },
  { 
    path: '/counter',    //hinzufügen
    name: 'Counter',     //hinzufügen
    component: Counter,  //hinzufügen
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

Stellen Sie das Routing so ein, dass die oben genannten Komponenten unter "localhost: 8080 / counter" gerendert werden.

Erstellen eines Store-Moduls

store/modules/**counter.ts＊＊

import {
  getModule,
  Module,
  VuexModule,
  Mutation,
  Action,
} from 'vuex-module-decorators'
import store from '../index'

type CounterState = {
  count: number
}

@Module({ store, dynamic: true, namespaced: true, name: 'Test' })
class CounterModule extends VuexModule implements CounterState {
  count = 0

  @Mutation
  SET_COUNT(payload: number) {
    this.count = payload
  }

  @Action
  async increment() {
    this.SET_COUNT(this.count + 1)
  }

  @Action
  async decrement() {
    this.SET_COUNT(this.count - 1)
  }

  @Action
  async reset() {
    this.SET_COUNT(0)
  }
}

export const counterModule = getModule(CounterModule)

Sie können das Store-Modul intuitiv mit den zu Beginn eingeführten "vuex-module-decorators" beschreiben. Dieses Mal werden wir die Daten "count" verwenden, um zu überprüfen, ob sich die Anzahl dynamisch ändert, wenn die Aktion ausgelöst wird.

Bearbeiten Sie tsconfig.json

tsconfig.json

"experimentalDecorators": true, //hinzufügen

Wenn Sie sich über Linter ärgern, stellen Sie dies bitte ein.

Bearbeiten Sie Counter.vue

pages/Counter.vue

<template>
  <v-card>
    <v-container>
      <v-card-title>Counter</v-card-title>
      <v-divider />

      <v-container>
        <v-avatar v-for="item in count" :key="item" color="primary">
          <span class="white--text headline">{{ item }}</span>
        </v-avatar>
      </v-container>

      <v-divider />

      <v-card-actions>
        <v-btn @click="increment">+</v-btn> <!--Führen Sie die Inkrementierungsmethode aus, wenn Sie darauf klicken-->
        <v-btn @click="decrement">-</v-btn> <!--Führen Sie die Dekrementierungsmethode aus, wenn Sie darauf klicken-->
        <v-btn text @click="reset">Reset</v-btn> <!--Führen Sie die Reset-Methode aus, wenn Sie darauf klicken-->
      </v-card-actions>
    </v-container>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { counterModule } from '../store/modules/counter'

@Component
export default class Counter extends Vue {
  get count() {
    return counterModule.count //Gibt die Anzahl der Filialen unverändert zurück
  }

  /**
   *Anzahl hinzufügen
   */
  increment() {
    counterModule.increment() //Starten Sie die Store-Inkrementmethode
  }

  /**
   *Abzüglich der Zählung
   */
  decrement() {
    counterModule.decrement() //Feuern Sie die Dekrementierungsmethode des Geschäfts ab
  }

  /**
   *Zählung zurücksetzen
   */
  reset() {
    counterModule.reset() //Feuern Sie die Methode zum Zurücksetzen des Speichers ab
  }
}
</script>

<style lang="scss" scoped></style>

Lassen Sie uns hier Vuetify voll ausnutzen. Bearbeiten Sie es so, dass ein V-Avatar für die Anzahl der Zählungen generiert wird, und verschieben Sie es dann einfach!

Funktionsprüfung!

Wenn Sie [+] [-] drücken, um den Zähler zu erhöhen oder zu verringern, ist dies in Ordnung! Danke für deine harte Arbeit!

Ich habe einen einfachen Zähler erstellt und das Verhalten von Vuex (Store) überprüft. Es ist jedoch möglich, eine Verknüpfung mit der tatsächlichen Datenbank herzustellen, indem die API-Kommunikation in die Aktion des Stores eingefügt wird. Nächstes Mal werde ich einen Container für den API-Server und die Datenbank erstellen, die tatsächlich funktioniert!

nächstes Mal

Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ MySQL Edition ~

Referenz

Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ Express ~ So erstellen Sie mit Docker ~ Sequelize ~ eine Umgebung aus [TypeScript + Vue + Express + MySQL]