Grafische Einführung in vue.js von der Installation bis zum Bauprozess

Dieser Artikel stellt hauptsächlich den gesamten Prozess von Vuejs im Detail vor. Er hat einen gewissen Referenzwert.

Ursprünglich wurde er direkt heruntergeladen Dateien wurden nach der vorherigen Methode bearbeitet

Später stellte ich fest, dass die Verwendung nach der Installation bequemer zu sein schien, und begann dann darüber nachzudenken, wie ich das Framework einrichten sollte Folgendes ist der Vorgang:

Installation

1. Installieren Sie nodejs

Laden Sie es einfach online herunter

Installieren Sie das Taobao-Image

Befehlszeileneingabe öffnen

npm install -g cnpm --registry= https://registry.npm.taobao.org

3. Webpack installieren

cnpm install webpack -g

4. Einen neuen Ordner in dem Pfad erstellen, in dem Sie ein neues Projekt zum Speichern erstellen möchten Projektdateien

cd in Ihren Dateipfad

vue init webpack-simple Projektname (der Name darf nicht auf Chinesisch sein)

Dahinter verbergen sich einige Standardeinstellungen

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5. Abschließen Später werden Sie feststellen, dass Sie bereits die erforderlichen Dateien in Ihrem Ordner haben

6. Die Installation von npm-Projektabhängigkeiten wird langsam sein, da sie dort vorhanden sind sind viele Dateien

npm install

7. Führen Sie Ihr Projekt aus

npm run dev

An diesem Punkt ist Ihre Grundinstallation und die Einrichtung ist abgeschlossen

Im Folgenden geht es um die Einführung einiger erforderlicher Dateien, die mir im Projekt begegnet sind

1. Import von jQuery

Als ich zuvor mit anderen diskutierte, sagte er, dass vue jQuery nicht verwenden muss, aber unser Projekt sagte, dass es installiert werden muss, also habe ich es installiert -_ -
Die erste ist die Befehlszeileninstallation

npm install jquery --save

Hinzufügen - -save bedeutet, es lokal zu speichern
und es dann zu webpack.config hinzuzufügen. js
module.exports.plugins =

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

hinzufügen und

import $ from 'jquery'
window.$=$

zu js wie diesem jQuery Es wurde erfolgreich in das Projekt importiert

2, statischCSS- und JS-Import

statischer CSS-Import ist Im entsprechenden .vue-Dateiimport

zum Beispiel

@import './assets/css/global.css';

statisches JS im entsprechenden JS

erfordern und diese js und css Unter Assets

require('./assets/js/global.js')

3. vue-ressource importieren
Die Importmethoden von elementui sind die gleichen.

npm install vue-resource --save

und verwenden Sie

in den js, die importiert werden müssen

import VueResource from 'vue-resource'
Vue.use(VueResource)

Das obige ist der detaillierte Inhalt vonGrafische Einführung in vue.js von der Installation bis zum Bauprozess. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!