Schnellstartanleitung für ein neues Vue.js-Projekt – Notizen von dead_wolf

Originalveröffentlichung unter: Notizen von wolf_tuerto

In der wenigen Zeit, in die ich mich vertieft habe Vue.js Ich habe den Rahmen wirklich zu schätzen gelernt,
und die umliegenden Bibliotheken.

Dies rechthaberisch Der Leitfaden beschreibt die Schritte, die ich unternehme, um mit einer soliden Grundlage für einen Neuen zu beginnen
Vue.js Projekt.


Welche besonderen Meinungen enthält es?
Nun, für den Anfang:

  • Paket-Manager: Garn — Schnelles, zuverlässiges und sicheres Abhängigkeitsmanagement.
  • Tool zur Projekterstellung: Ansicht-Kli — CLI für schnelle Vue.js-Entwicklung.
  • UI-Framework: Vuetify — Komponenten-Framework für Material Design.
  • Bibliothek für Materialsymbole: Google-Materialsymbole — Wunderschön verarbeitet, entzückend und einfach zu bedienen.
  • Validierungsbibliothek: wegfliegen — Einfache, leichtgewichtige modellbasierte Validierung für Vue.js.
  • Ajax-Bibliothek: Axios — Promise-basierter HTTP-Client für den Browser und Node.js.
  • Utility-Bibliothek: Lodash — Eine moderne JavaScript-Dienstprogrammbibliothek.
  • Zustandsverwaltungsmuster + Bibliothek: Vuex — Zentralisierte Zustandsverwaltung für Vue.js.

Ich habe festgestellt, dass diese Tools und Bibliotheken leistungsfähig, intuitiv und sehr einfach zu handhaben sind.


Ich hatte einen ähnlichen Stapel für Eckig das enthielt Kantiges Material plus etwas Gewohnheit
Komponentenprimitive zum Rendern dynamischer Formulare, Datentabellen und anderer Dinge.

Ich war wirklich angetan von der Implementierung dynamischer Formulare, die es dem Benutzer ermöglichte, dies zu spezifizieren
hochgradig konfigurierbar Formulare mit einer einfachen JSON-Spezifikation.
Die generierten Formulare ließen sich gut in unsere integrieren Schienen JSON-API Backend.

Ich habe vor, ein Tutorial darüber zu schreiben, dasselbe zu tun, aber diesmal mit Vue.js und
VuetifyAber ich schweife ab…

Hier sehen wir, wie Sie eine neu erstellte App mit einrichten Ansicht-Kli so wird es bereit sein
uns, sofort damit zu beginnen, es zu hacken.

Voraussetzungen

Installieren Sie Node.js, Yarn und vue-cli

Erstellen Sie ein neues Projekt

vue init webpack my-project

Normalerweise akzeptiere ich alle Standardeinstellungen, mit Ausnahme des Paketmanagers.
ich wähle Garn wenn gefragt.

Wie Sie sehen können, verwenden wir die Webpaket Schablone.
Hier ist die Liste für die offizielle Vorlagen.

ESLint-Regeln anpassen

Fügen Sie diese Zeile der hinzu rules Schlüssel ein .eslintrc.js Datei:

'no-multiple-empty-lines': [2, { max: 2 }]

Der Grund für diese Änderung ist, dass ich normalerweise zwei aufeinanderfolgende Leerzeilen lasse
zwischen einigen Elementen in meinem .vue Komponentendateien.

Zum Beispiel zwischen import Abschnitte und folgenden Code.
Oder dazwischen <template>, <script> und <style>.

Projektabhängigkeiten installieren

Verwenden Garn So fügen Sie die Projektabhängigkeiten hinzu:

yarn add vuetify material-design-icons vuelidate axios lodash vuex

Ich mag es, die Macht zu haben SCSS/SASS beim Schreiben zur Verfügung CSS Regeln.
Außerdem schreibe ich meine Vorlagen normalerweise gerne mit Mops.

--dev wird Abhängigkeiten zu hinzufügen devDependencies Abschnitt in Ihrem
package.json Datei:

yarn add sass-loader node-sass pug --dev

Anfängliche Konfiguration und Einrichtung der App

Zum Einrichten Vuetify, Google-Materialsymbole und wegfliegendu brauchst
um diese Zeilen hinzuzufügen src/main.js:

import Vuelidate from 'vuelidate'
import Vuetify from 'vuetify'

import 'material-design-icons/iconfont/material-icons.css'
import 'vuetify/dist/vuetify.css'


Vue.use(Vuelidate)
Vue.use(Vuetify)

Um zu sehen Vuetify in Aktion, ändern Sie Ihre src/App.vue Datei nach:

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

Und dein src/components/HelloWorld.vue zu:

<template>
  <v-content>
    <v-btn>
      Hello!
    </v-btn>
  </v-content>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

Typografie

Das Materialdesign Richtlinien für Typografie, behaupte das Roboter —und Noto— sind die zu verwendenden Standardschriften.

Fügen Sie dies hinzu <head> Abschnitt Ihrer index.html Datei:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

Guck mal

Starten Sie Ihr Projekt mit:

yarn dev

Und besuchen Sie: http://localhost:8080.

Das ist es!
Lass es dir gut gehen. 😃

Wenn Sie nach einem suchen Material Design Farbbrowser, ein Tool, mit dem Sie Farben mischen und anpassen können,
Dann sehen Sie sich diesen Vuetify-Farbthema-Builder an!

— lt

Similar Posts

Leave a Reply

Your email address will not be published.