vue boilerplate template herunterladen – vue boilerplate template Quellcode herunterladen

vue boilerplate template

Andere Kategorien

vue-boilerplate-template V2.0.0

Herunterladen

Vue-Boilerplate-Vorlage

?(vue webpack vuex vue-router vue-i18n element-ui) sofort einsatzbereit

? Schöne Boilerplate-Vorlage zum Erstellen eines Medium-plus-Vue.js(2.*)-Projekts

Mehr WIKI

Ziel und Philosophie

Für den Aufbau mittelgroßer (+) VUE- Projekte geben Sie einige Referenzen an, die auf früheren Erfahrungen basieren. Die neueste Vue Boilerplate, die auf vue-cli3 basiert, ist Open Source: awesome-vue-cli3-example. Wenn Sie darauf achten, ist es meiner Meinung nach sehr lohnenswert ?

Voraussetzungen

Node.js (>=4.x, 8.x bevorzugt), Npm Version 4+ (Yarn bevorzugt) und Git.

Demo

Online-Demoseite

Vorteil

Basierend auf vue-cli Build. Nehmen Sie weitere Optimierungen vor, um die Verwendung von Vue zu erleichtern.
Enthält bereits viele häufig verwendete Bibliotheken, wie z. B. vue-i18n , axios , lodash ...
Mit einigen Erfahrungsartikeln über Vue , wie zum Beispiel: 如何写一手漂亮的 Vue. Und wird immer noch aktualisiert.
Optimieren Sie die Erstellung der Anwendung mithilfe von WebPack weiter.
- Webpack ist eine beliebte Website
- Webpack ist eine beliebte Webpack-App
- Optimieren Sie Ihre Bibliotheken mit Webpack
- Schönes Webpack-Tutorial

Verwendung

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

Gehen Sie zu http://localhost:8080/. Wenn Port 8080 auf Ihrem Computer bereits verwendet wird, gibt das Programm den verfügbaren Port (inkrementell) für Sie an, zum Beispiel 8081 / 8082 ... . Natürlich können Sie den Port auch vorübergehend mit dem folgenden Befehl ersetzen:

 PORT=8888 npm run dev

Zusätzliche Ergänzung : Sie müssen sicherstellen, dass PORT ein Befehl ist, der auf Ihrem Computer ausgeführt werden kann.

Mehr Befehl

 npm run build

Entspricht node build.js und initiiert ein Build-Projekt.

 npm run build:dll

Äquivalente Ausführung webpack --config build/webpack.dll.conf.js , Weitere Informationen finden Sie unter webpack.DllPlugin.

 npm run jarvis / yarn run jarvis

Führen Sie webpack-jarvis aus (ein sehr intelligentes browserbasiertes Webpack-Dashboard). Öffnen Sie in Ihrem Browser: localhost:1337, schon haben Sie es.

npm run pretest

Erstellen Sie mit nodejs den lokalen Server: http://localhost:3000/ und führen Sie nach dem Paket einen einfachen Vortest für den Code durch.

 npm run analyz

Webpack-Plugin und CLI-Dienstprogramm, das Bundle-Inhalte als praktische interaktive, zoombare Baumkarte darstellt. Diese Adresse wird automatisch geöffnet: http://localhost:8888/ .

Abhängige Plugin-Liste

vue2
Vue-Router
vuex
vue-i18n
Axios
Bootstrap
element-ui
lodash
~~Moment~~ dayjs
js-cookie
... ...

Operationsanfrage

Ihr Backend kann die folgenden Formatdaten zurückgeben, es ist besser.

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

Am Frontend können Sie die Anfrage wie folgt bearbeiten:

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

So rücksichtsvoll wurde die Vorlage dabei unterstützt, die Anforderung einheitlich zu verarbeiten, sodass sie so einfach zu verwenden ist, dass Sie natürlich Ihre eigene Datei nach Bedarf in der Datei helper/ajax.js ändern können.