Zusammenfassung von 60 häufigen Vue-Problemen und Lösungen

F1: Installationszeitüberschreitung (Installationszeitüberschreitung)

Es gibt einige Optionen:

cnpm : 国内对npm的镜像版本
/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org

// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
yarn 和 npm 改源大法

//使用 nrm 模块 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.

F2: Installieren Sie einige Pakete, die kompiliert werden müssen: Meldung, dass Python nicht installiert ist, Build fehlschlägt usw.

Da für die Installation einiger NPM-Pakete eine kompilierte Umgebung erforderlich ist, sind sowohl Mac als auch Linux in Ordnung und die meisten davon sind vollständig. Windows-Benutzer verlassen sich auf einige Bibliotheken von Visual Studio und Python 2+. Windows-Freunde installieren: Windows-Build-Tools Python 2. X

F3: „xxModule“ kann nicht gefunden werden – einige Abhängigkeiten oder Module können nicht gefunden werden

In diesem Fall können Sie normalerweise sehen, welches Paket die Informationen in der Fehlermeldung ausgegeben hat. Im Allgemeinen können Sie dieses Modul deinstallieren, installieren und erneut installieren.

F4: Datenfunktionen sollten ein Objekt zurückgeben

Das Problem besteht darin, dass innerhalb der Vue-Instanz die Daten einer einzelnen Komponente ein Objekt zurückgeben müssen; wie folgt

export default {
    
    
  name: 'page-router-view',
      data () {
    
    
      return {
    
    
        tabs: [
          {
    
    
            title: '财务信息',
            url: '/userinfo'
          },
          {
    
    
            title: '帐号信息',
            url: '/userinfo/base'
          }
        ]
      }
    }
}

Warum ein Datenobjekt zurückgeben? Die offizielle Erklärung lautet wie folgt: Daten müssen als Funktion deklariert werden, die ein anfängliches Datenobjekt zurückgibt, da Komponenten zum Erstellen mehrerer Instanzen verwendet werden können. Wenn Daten immer noch ein reines Objekt wären, würden alle Instanzen eine Referenz auf dasselbe Datenobjekt haben! Kurz gesagt, wenn Komponenten wiederverwendet werden, werden die Daten nicht gleichzeitig auf denselben Ort verwiesen, was zu fehlerhaften Problemen führt, die sich auf den gesamten Körper auswirken ...

F5: Ich habe Ereignisse zu den nativen Steuerelementen in der Komponente hinzugefügt, aber warum wurden sie nicht wirksam!!!

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{
    
    {
    
    item.menuName}}</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{
    
    {
    
    item.menuName}}</span>
</router-link>
<!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->

F6: Ich verwende Axios. Warum erkennt der IE-Browser es nicht (IE9+)?

那是因为 IE 整个家族都不支持 promise, 解决方案:
npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();

F7: Ich habe this.xxx= in der Funktion verwendet. Warum wird Cannot set property 'xxx' von undefiniert ausgelöst?

Dies ist wieder die Routine ... dies ist an den aktuell laufenden Kontext gebunden ...

Wenn Sie Axios oder andere Versprechen oder SetInterval verwenden, verweisen diese im Allgemeinen standardmäßig auf den äußersten globalen Hook.

Um es einfach auszudrücken: „Der äußerste Kontext ist Fenster, und innerhalb von Vue ist ein Vue-Objekt statt einer Instanz!“;

Lösung:

Temporäre Speichermethode: Dies zuerst in der Funktion zwischenspeichern, let that = this; (let is es6, es5 verwendet var)
Pfeilfunktion: Ordnet den aktuellen Laufbereich zwangsweise als Kontext davon zu;

F8: Ich habe einige Vue-Tutorials mit diesen Schreibmethoden gesehen. Was bedeuten sie? @click.prevent,v-demo.ab;

Nehmen wir diese beiden Beispiele.

@click.prevent: Ereignis + Modifikator, die Funktion besteht darin, zu klicken, aber das Standardverhalten zu verhindern.

v-demo.ab: Benutzerdefinierte Anweisungen + Modifikatoren. Es hängt davon ab, welche Anweisungen Sie haben. Die meisten Funktionen von Modifikatoren bestehen darin, bestimmte erweiterte Funktionen zu Ereignissen hinzuzufügen, z. B. das Verhindern von Ereignisblasen, das Verhindern von Standardverhalten und den Zugriff auf native Steuerelemente. Integrieren Sie Tastaturkürzel und mehr.

Kann ich den Modifikator anpassen? Das ist auch möglich. Aliase für Schlüsselwertmodifikatoren können über das globale Objekt config.keyCodes angepasst werden:

F9: Warum wird das kleine Bild, das ich importiert habe, als data:image/png;base64xxxxxxxx gerendert?

Dies wird durch das entsprechende Plug-in im Webpack erledigt. Bilder (angegebenes Format), die kleiner als eine bestimmte Anzahl von K sind, werden zum Rendern direkt in das Base64-Format konvertiert;

Die spezifische Konfiguration ist der URL-Loader in den Regeln in webpack.base.conf.js. Der Vorteil dieser Vorgehensweise besteht darin, den Inhalt zuerst zu laden und die Anzahl der http-Anfragen zu reduzieren, um die Belastung des Website-Servers bei steigender Netzwerkgeschwindigkeit zu verringern ist nicht gut.

F10: Die Komponentenvorlage muss genau ein Stammelement enthalten. Wenn Sie v-if für mehrere Elemente verwenden, xxxxx

Im Allgemeinen muss der Einzelkomponenten-Rendering-DOM-Bereich ein Stammelement haben und es dürfen keine Geschwisterelemente angezeigt werden. Sie können die Anweisungen v-if und v-else-if verwenden, um die Koexistenz anderer Elemente zu steuern.

Um es ganz klar auszudrücken: Es gibt eine einzigartige übergeordnete Klasse, den Wrapper. Beispielsweise kann ein div (übergeordneter enthaltender Block) beliebig viele gleichgeordnete oder verschachtelte Elemente enthalten, aber das äußerste Element kann keine gleichgeordneten Elemente haben!

F11: So lösen Sie domänenübergreifende Probleme! Beispielsweise ist auf der angeforderten Ressource kein Header „Access-Control-Allow-Origin“ vorhanden.

Diese Art von Problem kommt häufig vor, daher werde ich nicht auf Details eingehen. Lassen Sie uns allgemein darüber sprechen.

1: CORS, Front- und Back-Ends müssen entsprechend konfiguriert werden, IE10+
2: Nginx-Reverse-Proxy, ein für alle Mal <-- Sie können dies für Online-Umgebungen verwenden

Im Offline-Entwicklungsmodus, wenn Sie beispielsweise vue-cli verwenden, hat Webpack so etwas wie ProxyTable eingeführt, das auch als Schnittstellen-Reverse-Proxy verwendet werden kann.

// 在 config 目录下的index.js
proxyTable: {
    
    
  "/bp-api": {
    
    
    target: "http://new.d.st.cn",
    changeOrigin: true,
    // pathRewrite: {
    
    
    //   "^/bp-api": "/"
    // }
  }
}

// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道

Natürlich gibt es immer noch die JSONP-Methode, die immer noch stark ist! Sie weist jedoch viele Einschränkungen auf und eignet sich besser für die Erfassung spezieller Informationen!

F12: Der Array-Wert, den ich durchlaufen muss, wurde aktualisiert und der Wert wurde zugewiesen. Warum wird die Ansicht nicht aktualisiert?

Das liegt daran, dass es Einschränkungen gibt. Auch die offizielle Dokumentation macht es sehr deutlich: Nur einige modifizierte Methoden bieten die gleiche Nutzungssituation wie die ursprüngliche (können jedoch Ansichtsaktualisierungen auslösen);

Im Allgemeinen ist die am häufigsten verwendete Methode (mit Ausnahme der magischen Modifikationsmethode) die Verwendung von: this.$set(obj, item, value);

F13: Warum können die Stile zwischen meinen Komponenten nicht vererbt oder überschrieben werden?

Bitte bestätigen Sie im Einzelkomponenten-Entwicklungsmodus, ob die CSS-Modularisierungsfunktion aktiviert ist! Das heißt, sie ist bereichsorientiert (sie wird in vue-cli konfiguriert und wird automatisch aktiviert, solange dieses Attribut hinzugefügt wird).

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

Warum kann es nicht vererbt oder überschrieben werden, da jede Klasse, ID oder sogar Beschriftung automatisch einen Hash nach dem CSS hinzufügt! Zum Beispiel:

// 写的时候是这个
.trangle{
    
    }
// 编译过后,加上了 hash
.trangle[data-v-1ec35ffc]{
    
    }

Diese werden im CSS-Loader konfiguriert!!!

F14: Nachdem der Routing-Modus auf Verlauf geändert wurde, wird beim ersten Starten der Homepage kein Fehler gemeldet und beim Aktualisieren der Zugriffsroute werden Fehler gemeldet!

Die Hauptseite für die Abfrage muss für den entsprechenden Server konfiguriert werden. Sie kann auch als Leitfaden für den Haupt-Routing-Eingang betrachtet werden.

Es gibt auch offizielle Dokumente, denn es gibt immer Leute, die nicht gerne Dokumente lesen und immer gerne eine Partei sind.

F15: Ich möchte die Seite abfangen oder etwas tun, bevor die Seite eingeht. Ist das möglich?

Ja, Hooks für verschiedene Router!! Natürlich ist es auch möglich, sich die Scrollposition zu merken, siehe Dokumentation auf der offiziellen Website für Details.

F16: TypeError: xxx ist keine Funktion

Diese Art von Problem ist offensichtlich ein Problem mit der Schreibmethode ... Können Sie Ihr Gehirn gebrauchen!!

F17: Nicht erfasster Referenzfehler: xxx ist nicht definiert

Die Variable, die den Daten in der Instanz entspricht, ist nicht deklariert. Wenn Sie das Modul importieren und diesen Fehler melden, muss es daran liegen, dass der Export nicht ordnungsgemäß geschrieben wurde.

F18: Fehler in der Renderfunktion: „Typfehler: Eigenschaft „xxx“ von undefiniert kann nicht gelesen werden.“

Die meisten dieser Probleme werden durch eine falsche Initialisierungshaltung verursacht, z. B. durch die Einführung von Echart. Verstehen Sie den Lebenszyklus sorgfältig und führen Sie dann eine spezifische Initialisierung durch.

Vue-Komponenten tun dies manchmal (verschachtelte Komponenten oder Props-Transfer-Initialisierung) ... Dies ist auch das Grundproblem

F19: Unerwartetes Token: Operator xxxxx

Boss, das ist auf den ersten Blick ein grammatikalischer Fehler. Es handelt sich im Grunde um ein Symbolproblem. Im Fehlerbericht wird im Allgemeinen angegeben, welche Zeile oder Komponente.

F20: Auf den NPM-Run-Build kann nicht direkt danach zugegriffen werden

Boss! Sie müssen zumindest einen lokalen Server einrichten, um darauf zuzugreifen, oder?

F21: Nachdem CSSbackground die Bildverpackung eingeführt hat, ist der Zugriffspfad falsch

Da sich das gepackte Bild im Stammverzeichnis befindet, erhalten Sie auf jeden Fall eine Fehlermeldung, wenn Sie einen relativen Pfad verwenden ...

Sie können die Statik in der Konfigurationsdatei von Webpack auf magische Weise in ./static ändern ... dies wird jedoch nicht empfohlen. Wenn Sie das Bild oder etwas anderes in das Assets-Verzeichnis werfen und einen relativen Pfad verwenden, ist dies nach dem Packen normal.

F22: Bei der Installation des Moduls gibt das Befehlsfenster nicht unterstützte Plattform xxx aus

Im Allgemeinen gibt es zwei Situationen: Die Knotenversion ist inkompatibel und das System ist inkompatibel;

Lösung: Installieren Sie es entweder nicht oder erfüllen Sie die Installationsanforderungen.

F23: Unerwartetes Tab-Zeichen

Im Allgemeinen aktivieren Sie eslint, wenn Sie mit Scaffolding initialisieren. Befolgen Sie entweder die Regeln oder ändern Sie die Regeln oder schalten Sie die Eslint-Erkennung direkt im Webpack aus.

F24: Komponente konnte nicht gemountet werden: Vorlage oder Renderfunktion nicht definiert

Die Komponentenmontage ist fehlgeschlagen, es gibt nur wenige Probleme

Komponenten sind nicht richtig eingeführt;
Mount-Punkte sind in der falschen Reihenfolge; beheben Sie den Fehler selbst

F25: Unbekanntes benutzerdefiniertes Element: - Haben Sie die Komponente korrekt registriert?

Die Komponente wurde nicht richtig eingeführt oder nicht richtig verwendet. Bitte bestätigen Sie dies in der Bestellung.

Importieren Sie die entsprechende Komponente
und deklarieren Sie sie in Komponenten.
Deklarieren Sie die Bezeichnung im Dom-Bereich.

F26: Die Post-Anfrage von axios kann vom Hintergrund nicht angenommen werden!

Axios sendet standardmäßig im JSON-Format. Bitte bestätigen Sie, ob der Hintergrund entsprechende Unterstützung bietet. Wenn er nur die Serialisierung herkömmlicher Formen akzeptieren kann, müssen Sie selbst eine Escape-Methode schreiben ... Natürlich gibt es eine problemlosere Lösung: Installieren ein kleines Modul qs .

npm install qs -S
// 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
// 具体可以看看我 axios 封装那篇文章
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
  config => {
    
    
    // 在发送请求之前做某件事
    if (
      config.method === "post"
    ) {
    
    
      // 序列化
      config.data = qs.stringify(config.data); // ***** 这里转义
    }

    // 若是有做鉴权token , 就给头部带上token
    if (localStorage.token) {
    
    
      config.headers.Authorization = localStorage.token;
    }
    return config;
  },
  error => {
    
    
    Message({
    
    
      //  饿了么的消息弹窗组件,类似toast
      showClose: true,
      message: error,
      type: "error.data.error.message"
    });
    return Promise.reject(error.data.error.message);
  }
);

F27: Ungültige Requisite: Typprüfung für Requisite „xxx“ fehlgeschlagen. Boolescher Wert erwartet, String erhalten.

Ein solches Problem besteht normalerweise darin, dass der Requisitentyp in der Komponente den akzeptierten Bereichstyp festgelegt hat, der von Ihnen übergebene Wert jedoch nicht dem erforderlichen Typ entspricht. Ist es in Ordnung, beim Schreiben von Code strenger vorzugehen?

F28: Können Filter in DOM-Bereichen in Kombination mit Anweisungen verwendet werden?

// 不行,看下面的错误例子
<li v-for="(item,index) in range | sortByDesc | spliceText">{
    
    {
    
    item}}</li>
// `vue2+`的指令只能用语 mustache`{
    
    {}}` , 正确姿势如下:
<span>{
    
    {
    
     message | capitalize }}</span>

F29: […Array],…mapState,[SOME_MUTATION] (state) {}, increment ({ commit }) {} Was zum Teufel ist das für eine Schreibweise!

Ich habe die Grundlagen von ES6+ (ES2015) durchgearbeitet ... die oben genannten sind in der Reihenfolge: Array-Destrukturierung, Objekt-Destrukturierung, Objektstilfunktionen, Objekt-Destrukturierung und Zuweisungsübergabe.

F30: Warum ist der UC-Zugriff meiner Vue-Website leer oder das Flex-Layout ist durcheinander!!

Komm, komm, geh um die Ecke ... UC gilt als der IE der mobilen Welt. Dieser Titel ist nicht umsonst. Das Layout von Flexbox ist durcheinander. Im Allgemeinen haben Sie das Kompatibilitätsschema nicht geschrieben ... das heißt, mit verschiedenen Präfixen und der Aufteilung zusammengesetzter Attribute.

Es gibt eine Situation, die definitiv dazu führt, dass der UC-Zugriff leer ist, nämlich das Downgrade des ES6-Codes ist nicht gründlich genug. In anderen Situationen kann es sich um Routing-Konfigurationsprobleme handeln (selbst beheben). Die aktuelle Entwicklung empfiehlt, es bei Bedarf einzuführen und sich auf Babel zu verlassen -preset-env, um es zu steuern. , um das Verpackungsvolumen zu reduzieren.

Aber die Konsequenzen daraus sind, dass einige Kernel älter sind ... hehe ... tschüss. Daher ist es am besten, den Code vollständig auf ES5 zu erstellen!! Denken Sie daran, dass einige Funktionen nicht zufällig verwendet werden können und es keine entsprechende Polyfüllung gibt, wie z. B. den ES6-Proxy

F31: Dies. $set|this.$ xxx Was bedeutet $? Ist es jQuery? Wird es einen Konflikt verursachen?

Lassen Sie es mich im Detail erklären.

Vues $Es$ hat nichts mit jQuery zu tun, genau wie JavaScript und Java.$Vue$$kapselt$$einige$
derintegrierten Funktionen von Vue und exportiert sie dann, also kapselt es einige der integrierten Funktionen von Vue und exportiert$sie\; dann$$als$$Es\; kapselt\; einigeintegrierte\; Funktionen\; vonvue.Dann\; beginnt\; der\; Export\; mit$ ... Dies ist offensichtlich kein Patent von jQuery;
jQuerys $ ist ein Selektor!! Holen Sie sich den DOM-Bereich ... Die beiden Funktionen sind völlig inkonsistent!

F32: Fehler im Event-Handler für „click“: „xxx“

Der größte Teil dieses Problems wird durch den Code verursacht, den Sie geschrieben haben. Ihr Ereignis wird ausgelöst, aber es gibt keine entsprechende Implementierung oder Variable innerhalb der Komponente, sodass ein Ereignisfehler ausgelöst wird.
Lösung: Beobachten Sie den Fehler und beheben Sie ihn langsam

F33: Welche Arten der Kommunikation zwischen Komponenten gibt es?

Im Grunde sind dies die am häufigsten verwendeten;

Vom Vater zum Sohn weitergeben: Requisiten vom Sohn zum Vater: Bruderkommunikation
aussenden : Ereignisbus: Finden Sie einfach eine Zwischenkomponente, die als Vermittler für die Informationsübertragung dient . Vuex: Informationsbaum

F34: Warum müssen Vuex-Benutzerinformationen im Browser gespeichert werden (sessionStorage oder localStorage)?

Da der Vuex-Speicher nicht aktualisiert werden kann, wird er im Cache des Browsers gespeichert. Wenn der Benutzer eine Aktualisierung durchführt, wird der Wert erneut abgerufen.

F35: Gibt es ein Projekt, bei dem Sie mehr über „Vue + Vue Router + Vuex“ oder „Express + Vue + Mongodb“ erfahren können?

Es gibt viele Suchanfragen auf Github. Wer diese Fragen stellt, sollte sein Gehirn einsetzen!

F36: Wenn Nginx online verwendet wird, wie wird es bereitgestellt? Und Reverse-Proxy und so weiter!

1. Stecken Sie den Service-Port des Knotens in Port 80 des Servers und verwenden Sie ihn als Reverse-Proxy. Port 3000 wird hier zur Demonstration verwendet.

#先定义一个website变量，方便管理以后端口的变更，不会影响到后续的80端口其他的操作
upstream website{
    
    
  server 127.0.0.1:3000;
}
 
server {
    
    
  listen 80;
#业户逻辑... ...
####
  location / {
    
    
        proxy_pass    http://website;
        proxy_redirect default ;
  }
####  
}

F37: „Ich kenne Vue. Muss ich noch jQuery oder natives JS lernen?“

Es gibt immer noch viele Unternehmen, die jQuery verwenden, und es gibt viele Orte, an denen man aus dem Quellcode lernen kann; natives js ist die Grundlage, egal um welches Front-End-Framework es sich handelt, es wird letztendlich von js implementiert; nur mit einer soliden Grundlage Können Sie tiefer lernen ... Frameworks beschleunigen nur die Entwicklung und verbessern
die Effizienz, sind jedoch nicht die Grundlage für Ihr langfristiges Standbein in dieser Branche.
Front-End-Mitarbeiter brauchen nicht nur Breite, sondern auch Tiefe ... Nur auf diese Weise Können wir weitermachen...

F38: npm run dev meldet einen Portfehler! Fehler: listen EADDRINUSE :::8080

Ich muss Ihnen nicht sagen, ob Sie Webpack verwenden, um selbst Gerüste zu erstellen; Webpack-Konfiguration in Vue-cli: config/index.js

dev: {
    
    
    env: require("./dev.env"),
    port: 8080, //  这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
    
    
      "/bp-api": {
    
    
        target: "http://new.d.st.cn",
        changeOrigin: true,
        // pathRewrite: {
    
    
        //   "^/bp-api": "/"
        // }
    }
},

F39: Wann sollte v-if und wann v-show verwendet werden?

Lassen Sie uns zunächst über die Hauptunterschiede zwischen den beiden sprechen.

v-if: Der DOM-Bereich wird nicht generiert und das Dokument wird nicht eingefügt ... Wenn die Bedingungen erfüllt sind, wird es dynamisch in die Seite eingefügt! Einige Array-Objekte oder Werte müssen durchlaufen werden Verwenden Sie dieses Produkt am besten zur Steuerung. Warten Sie, bis der Wert erhalten ist, bevor Sie die Durchquerung verarbeiten. Andernfalls wird ein Fehler gemeldet, wenn der Vorgang zu schnell ist, z. B. wenn die Daten nicht angefordert wurden! v-show: Der DOM-
Bereich wird gleichzeitig mit dem Rendern der Komponente gerendert, aber mit CSS einfach ausgeblendet. Für das Dropdown-Menü ändern sich die Daten des Faltmenüs im Grunde nicht viel. Dieses funktioniert am besten ... und verbessert den Benutzer Erfahrung, da dies nicht dazu führt, dass die Seite neu gezeichnet wird, sondern durch DOM-Manipulation!

Kurz gesagt: Verwenden Sie v-show, wenn sich die DOM-Struktur nicht wesentlich ändert, verwenden Sie v-if, wenn die Daten stark geändert werden müssen oder das Layout geändert werden muss.

F40: Was ist das Tag von HTML5?

Sie haben es erraten ... es gibt ein solches Tag in HTML5, aber die Vorlage von Vue ist etwas anders und wird vom Browser nicht analysiert.

Sie können es als temporäres Etikett verstehen, das Ihnen das Schreiben von Schleifen und die Beurteilung erleichtert ...

Da die Vorlage am Ende nicht auf der Seite des Browsers geparst wird, fungiert sie beim Vue-Parsing lediglich als Wrapping-Ebene! Am Ende sehen wir die kombinierte DOM-Struktur nach der internen Verarbeitung!

F41: Das Attribut „Bereich“ für Slots mit Gültigkeitsbereich …. seit 2.5 durch „slot-scope“ ersetzt

Dieses Problem tritt nur auf, wenn das alte Projekt auf vue2.5+ aktualisiert wird. Die Eingabeaufforderung lautet, dass der Bereich jetzt durch Slot-Scope ersetzt werden soll, der Bereich kann jedoch vorübergehend verwendet werden und wird in Zukunft entfernt

F42: Nicht erfasster Referenzfehler: Vue ist nicht definiert!

In der Reihenfolge ausschließen:

Wird Vue korrekt importiert?
Wird Vue korrekt instanziiert?
Ist die von Vue verwendete Haltung korrekt (z. B. legen Sie direkt eine Vue-Variable fest!!! Sie ist einfach undefiniert. Lassen Sie uns bestimmte Probleme analysieren.)

F43: FEHLER in static/js/xxxxxxx.js von UglifyJs

Ich weiß, dass eine der Situationen, in denen dies passieren wird, darin besteht, dass die von Ihnen eingeführten JS direkt in die komprimierte Version von JS (xxx.min.js) importiert werden; dann ist UglifyJs (das JS komprimiert) im Webpack aktiviert und die doppelte Komprimierung ebenfalls verwendet. Die meisten von ihnen melden einen Fehler!!

Lösung: Führen Sie standardmäßiges, nicht minimiertes JS ein

F44: Können Requisiten Werte übergeben, ohne Folgendes zu verwenden: (v-bind)?

Ja, aber der standardmäßig übergebene Typ wird in eine Zeichenfolge analysiert! Wenn Sie andere Typen übergeben möchten, ist die Bindung weiterhin bindend.

F45: Nicht abgefangener TypeError: Die Eigenschaft xxx, die nur einen Getter hat, kann nicht festgelegt werden

Das Problem besteht darin, dass die Eigenschaft, die Sie bedienen möchten, nur Getter und keine Setter zulässt.

Lösung: Wenn Sie die Dinge anderer Leute benutzen, müssen Sie den Routinen anderer Leute folgen, sonst können Sie es nur selbst tun!

F46: Was ist das @ im Import xxx aus „@/components/layout/xxx“ in der einzelnen Komponente?

Dies ist das Wissen über Webpack. Lassen Sie uns darüber sprechen, nachdem wir es gesehen haben ... Webpack kann Alias ​​​​konfigurieren (dh Pfad-Alias), und jeder, der Linux oder Mac gespielt hat, weiß es.

Wie oben muss ich jedoch nicht sagen, dass ich selbst ein Gerüst bauen kann ... Schauen Sie sich das Innere von vue-cli an.

Dateiname: build -> webpack.base.conf.js

resolve: {
    
    
    extensions: [".js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围
    alias: {
    
    
      vue$: "vue/dist/vue.esm.js",  
      "@": resolve("src"),  // 这里就是别名了,比如@就代表直接从/src 下开始找起!!!
      "~": resolve("src/components")
    }
},

F47: SCSS (SASS) oder weniger, Stift ist besser!

Alle drei sind Präprozessoren;
scss gibt es schon am längsten und kann mehr Funktionen ausführen, aber wenn es sich um gewöhnliches verschachteltes Schreiben, Vererbung, Mixin handelt, sind diese drei fast gleich ... Sie können grundsätzlich einen von ihnen und den anderen verwenden zwei auf oberflächliche Art. Ja, aber es gibt einige Unterschiede in der Schreibweise:

scss: Es ist wie CSS geschrieben. Ausgerichtet auf
sass: Tatsächlich ist es scss, aber es ist anders geschrieben ... weniger auf Einrückung angewiesen
: grundsätzlich auf CSS ausgerichtet
Stift: das gleiche, auf Einrückung angewiesen ... das gleiche wie pug ( Jade)

Unterschiede in der Nutzungsumgebung:

Scss kann Ruby oder Node-Sass verwenden, um
weniger zu kompilieren. Es kann less.js oder den entsprechenden Loader zum Analysieren
des Stifts verwenden. Es kann nur mit dem Loader analysiert werden. Sein Erscheinungsbild basiert auf dem Knoten.

Es gibt auch einen aufstrebenden Stern, der sich auf Entkopplung und Plug-In konzentriert!!! Das ist PostCSS, ein Postprozessor! Interessierte können es selbst herausfinden und die oben genannten Schreibmethoden können mit Hilfe realisiert werden von Plug-Ins!

F48: Kompilierung mit x Fehlern fehlgeschlagen: Diese Abhängigkeit wurde nicht gefunden!

Kompilierungsfehler, die entsprechende Abhängigkeit wurde nicht gefunden! Die Lösung lautet wie folgt:

Wenn Sie wissen, dass das entsprechende Modul fehlt, installieren Sie es direkt. Wenn in einem von Ihnen installierten großen Modul (z. B. Axios) ein Problem mit einem Submodul (Abhängigkeitspaket) auftritt, deinstallieren Sie das gesamte große Modul und installieren Sie es erneut. Denn Ihre Fertigstellung ist möglicherweise nicht nützlich!

F49: SyntaxError: Unerwarteter Bezeichner;

Grammatikfehler. Sehen Sie sich die Fehlermeldung an, um die entsprechende Seite zum Überprüfen zu finden!

F50: Warum generiert meine NPM- oder Yarn-Installationsabhängigkeit eine Sperrdatei? Wozu dient sie?

Die Rolle der Sperrdatei besteht darin, die Versionsnummer zu vereinheitlichen, was einen großen Einfluss auf die Teamzusammenarbeit hat.

Wenn keine Sperre vorhanden ist, befolgen Sie die Anweisungen ^,~ in package.json.

Die von verschiedenen Personen zu unterschiedlichen Zeiten installierten Versionsnummern sind nicht unbedingt identisch.

Einige Pakete weisen sogar einige Breaking Changes (destruktive Updates) auf, was einen reibungslosen Ablauf der Entwicklung erschwert!

F51: Können Komponenten zwischengespeichert werden?

Ja, verwenden Sie Keep-Alive.

Aber es gibt Code ... Er wird viel Speicher beanspruchen ... Also habe ich ohne nachzudenken alle Komponenten zwischengespeichert !!! Ganz zu schweigen von der besseren Leistung ... Nach mehrmaligem Umschalten kann einige Hardware ihn nicht mehr halten , und der Browser stürzt ab oder friert ein ...

Daher speichert Keep-Alive im Allgemeinen einige Listenseiten zwischen, und es werden nicht zu viele Vorgänge durchgeführt. Mehr ist nur das Ersetzen der Ergebnismenge ... Fügen Sie dem Routing-Komponenten-Meta ein Flag-Bit hinzu und kombinieren Sie es mit v-if to Cache bei Bedarf hinzufügen. up!

F52: Der Unterschied zwischen Abhängigkeiten und devDependencies in package.json!

Wenn es nicht streng ist, gibt es tatsächlich keinen besonderen Unterschied. Wenn es streng ist, folgen Sie dem offiziellen Verständnis.

Abhängigkeiten: speichert Kerncodemodule, auf die online oder von Unternehmen zugegriffen werden kann, z. B. Vue, Vue-Router;

devDependencies: Die Entwicklungsmodule, die im Entwicklungsmodus von ihnen abhängen, dürfen nur zum Parsen von Codes und Escape-Codes verwendet werden, generieren aber keinen zusätzlichen Code für die Produktionsumgebung. Wie installiert babel-core beispielsweise Pakete unter den entsprechenden Abhängigkeiten?

npm install --save xxxx // dependencies
npm install --save-dev xxxx // devDependencies

//也能用简易的写法(i:install,-S:save,-D:save-dev)

npm i -S xxxx // npm install --save xxxx
npm i -D xxxx // npm install --save-dev xxxx

F53: Fehler bei der Installation von Chromedriver!! Korrigieren Sie die Haltung von npm i -D chromedriver

Na ja, toller GFW... Lösung: Geben Sie einfach die inländische Quelle für die Installation an.

npm install --save-dev chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/di

F54: Welches ist besser zu lernen: Vue, React oder Angular? Welcher Job ist leichter zu finden?

Vue ist eine fortschrittliche Entwicklung. Für diejenigen, die von der traditionellen Entwicklung zum MVVM-Modell wechseln, ist der Einstieg in Vue einfacher und die Lernkosten sind relativ niedrig.

Wenn Sie über eine gute Grundlage und einen Geist harter Arbeit verfügen, können Sie NG5 wählen oder 16 reagieren;

NG5 erfordert das Erlernen von Typoskript und RXJS und verwendet auch viele neue Dinge, wie Dekoratoren und Back-End-Injection-Konzepte. NG verfügt über einen eigenen Satz von MVVM-Prozessen;

Der Kern von Vue und React ist nur die Ansicht, Sie können sie mit dem kombinieren, was Ihnen gefällt

Die Schreibmethode von React ist auf funktionales Schreiben ausgerichtet, und es gibt auch jsx. Der Beamte selbst hat Flow und kann natürlich auch mit ts verwendet werden. Ich hatte nicht viel Kontakt damit ... also gibt es einen bestimmte Lernkosten;

Welches ist einfacher, einen Job zu finden!!! Lassen Sie mich Ihnen sagen ... Wenn Sie nur ein Framework kennen, handelt es sich nicht um ein qualifiziertes Frontend.

Was die Leute wollen, sind praktische Fähigkeiten und Lösungskompetenz!!! Technologie und Gehalt sind direkt proportional!!

Aussehen und Hintergrund, akademische Qualifikationen und Beredsamkeit können Punkte hinzufügen ... aber Sie müssen diese Bedingungen erst einmal kennen, bevor Sie sie in Betracht ziehen können!!!

F55: Ich habe eine komplexe Komponente, die gleichzeitig die Funktion zum Hinzufügen und Bearbeiten haben muss, aber die Felder müssen unverändert bleiben. Wie kann ich das unterbrechen?

Wie verstehen Sie, dass Felder unverändert bleiben? Das heißt, beim Hinzufügen und Bearbeiten wird gleichzeitig eine Kopie der Daten freigegeben.

Zum einen ändert sich das Routing, das Komponenten-Rendering ist dasselbe (es führt nicht dazu, dass die Komponente erneut gerendert und zerstört wird!), aber die Funktionen sind unterschiedlich (neues Hinzufügen und Kompilieren) ...

Wenn Sie beispielsweise vom Bearbeiten zum Hinzufügen wechseln, müssen die Daten leer und nicht zugewiesen sein und darauf warten, dass wir einen Wert zuweisen.

Es gibt etwas, das derzeit besonders geeignet ist, und zwar unveränderliches-js;

Dieses Ding kann die Einzigartigkeit von Daten simulieren! Oder Unveränderlichkeit genannt!

F56: „Der erste Bildschirm wird langsam geladen! Warum ist er kaputt? Die gepackte Datei ist relativ groß.“

Ausschließen und in der Reihenfolge bestätigen:

Reduzieren Sie die Verwendung von Bibliotheken von Drittanbietern wie jquey, die eliminiert werden können. DOM-Operationen werden selten verwendet und die nativen Operationen reichen grundsätzlich für die Entwicklung aus.

Wenn Momente eingeführt werden, schließt Webpack internationalisierte Sprachpakete aus.

Webpack komprimiert im Allgemeinen JS und CSS. Wenn Sie bereit sind, sich die Mühe zu machen, können Sie auch DLLs importieren.

Routing-Komponenten werden verzögert geladen.

Das Hinzufügen von Routing-Übergängen und das Laden von Warteeffekten löst möglicherweise nicht die Grundursache, aber zumindest wird das Warten dadurch etwas angenehmer, oder?

Im Großen und Ganzen ist es nach dem Packen in der Regel nicht zu groß;

Wenn Sie jedoch schneller sein möchten, können Sie nur serverseitiges Rendering (SSR) verwenden, wodurch das Parsen von Vorlagen und Anweisungen durch den Browser vermieden werden kann.

Geben Sie direkt ein HTML zurück ... auch SEO ...

F57: Vue SPA kann nicht optimiert werden (SEO)! Gibt es eine Lösung?

Ja, SSR (serverseitiges Rendering kann Ihre Anforderungen erfüllen), da die Anforderung als verarbeitetes HTML zurückkommt und es jetzt ein so beliebtes serverseitiges Entwicklungsframework für Vue gibt, wie Nuxt.js.

F58: Kann Vue eine Hybrid-App schreiben?

Klar, in beide Richtungen.

codorva + nativescript
Weex

F59: Kann Vue auf dem Desktop geschrieben werden?

Natürlich gibt es Electron und Node-Webkit (nw); ich kenne nur Electron;

Elektron
Electron-Vue: Vue-Cli-Gerüstvorlage für Elektron

F60: Vue-Entwicklung, benötigen Sie noch jQuery im Projekt?

Besprechen Sie je nach Situation:

Wenn es sich um ein altes Projekt handelt, führt es lediglich Vue ein, um die Entwicklung zu vereinfachen, sodass Sie es weiterhin verwenden können ...
Das Projekt umgestalten? Oder ein neues Projekt starten, das ist wirklich unnötig. Die Entwicklungsidee ist anders. Viele Vorgänge wurden früher ausgeführt mit DOM kann jetzt grundsätzlich datengesteuert sein, während eine kleine Anzahl notwendiger DOM-Operationen nativ ausgeführt werden kann ... und die Paketgröße ist klein und die Geschwindigkeit ist hoch, also warum nicht!

Dieser Artikel ist ein Nachdruck aus: JS Daily Question
Öffentliches WeChat-Konto: JS Daily Question