Vue 2.0 Einrichten von Routen - Verwenden Sie nicht "neu" für Nebenwirkungen

Question

Ich konfiguriere ein Vue-Projekt. Ich habe die Webpack-Vorlage verwendet. (npm install init webpack). Ich erhalte einen Fehler im Terminal -

ERROR in ./src/main.js 

✘ http://eslint.org/docs/rules/no-new Do not use 'new' for side effects 
/Users/uz067252/Documents/Development/Vue/workex/vue-project/src/main.js:21:1 
new Vue({ 
^ 


✘ 1 problem (1 error, 0 warnings) 


Errors: 
1 http://eslint.org/docs/rules/no-new 

Hier ist der main.js

import Vue from 'vue' 
import App from './App.vue' 
import Hello from './components/Hello.vue' 

import VueRouter from 'vue-router' 
import VueResource from 'vue-resource' 

// We want to apply VueResource and VueRouter 
// to our Vue instance 
Vue.use(VueResource) 
Vue.use(VueRouter) 

// Pointing routes to the components they should use 
var router = new VueRouter({ 
routes: [ 
    { path: '/hello', component: Hello }, 
    { path: '*', redirect: '/hello' } 
] 
}) 

new Vue({ 
el: '#app', 
router: router, 
render: h => h(App) 
}) 

Dank

Answer 1

Dieser Fehler von Ihrem eslint Code Formatter kommt, nicht von Vue.js selbst.

Ihre Webpack-Umgebung ist so konfiguriert, dass sie Code verifiziert, bevor sie Ihre App erstellt und startet. Währenddessen macht Ihre eslint diese Warnung aus.

es zu vermeiden, gehen Sie (in den letzten 5 Zeilen Ihrer main.js Datei) folgt:

new Vue({ // eslint-disable-line no-new 
    el: '#app', 
    router: router, 
    render: h => h(App) 
}) 

Was Sie tun, oben ist das Deaktivieren eslint Warnung für new nur in dieser Zeile oben . Jetzt startet dein Webpack deine App normal.

Die andere Option besteht darin, eine Regel in .eslintrc.js (im Stammordner des Projekts) festzulegen, in der Sie angeben können, dass die Regel no-new ignoriert werden soll. (nicht in diesem Fall empfohlen)

Answer 2

Sie sind nicht den Wert der new Vue(...) Aussage etwas zuweisen.

Eine new-Anweisung erstellt eine neue Instanz eines Objekts. Normalerweise wird diese Instanz einer Variablen zugewiesen. Wenn Sie die Instanz keiner Variablen zuweisen, wird sie als Müll erfasst.

Der Linter geht davon aus, dass Sie, da Sie keinen Bezug auf die neue Instanz haben, auf einen Nebeneffekt der Operation angewiesen sind, und dies ist eine schlechte Vorgehensweise. Ein Beispiel für einen Nebeneffekt wäre, wenn die Operation new den Wert einer globalen Variablen ändert.

Answer 3

Diese Linienregel ist nützlich und wichtig. Wenn Sie irgendeinen Rahmen - zum Beispiel vue - die neuen Betreiber Nebenwirkung verwenden, versuchen Sie in Anonimous Funktion zur Deckung von hinzufügen drei Klammern

(()=>code)(); 

im Code

(()=>new Vue({ // no linter directive need anymore 
    el: '#app', 
    router: router, 
    render: h => h(App) 
}))();