Konfigurowanie tras Vue 2.0 - Nie używaj "nowych" dla efektów ubocznych

Question

Konfiguruję projekt vue. Użyłem szablonu webpacka. (npm install init pack). Dostaję błąd w terminalu -

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 

Oto 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) 
}) 

Dzięki

Answer 1

Ten błąd pochodzi z twojego programu formatującego eslint, a nie samego Vue.js.

Twoje środowisko pakietu internetowego jest skonfigurowane tak, aby weryfikować kod przed jego kompilacją i uruchomieniem. Robiąc to, twoje ostrzeżenie eslint zgasiło to ostrzeżenie.

Aby tego uniknąć, należy wykonać następujące czynności (w ciągu ostatnich 5 linii swoimi main.js pliku):

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

Co robisz powyżej jest wyłączenie ostrzeżenia eslint dla new tylko w tym powyżej linii . Teraz Twój pakiet sieciowy uruchomi normalnie Twoją aplikację.

Inną opcją jest ustawienie reguły w .eslintrc.js (w folderze głównym projektu), gdzie można określić, że reguła no-new powinna zostać zignorowana. (niezalecane w tym przypadku)

Answer 2

Nie przypisujemy wartość rachunku new Vue(...) do niczego.

Instrukcja new tworzy nową instancję obiektu. Zwykle ta instancja jest przypisana do zmiennej. Jeśli nie przypiszesz instancji do zmiennej, zostanie ona zebrana.

Liniowiec zakłada, że ​​skoro nie przechowujesz odniesienia do nowej instancji, polegasz na efekcie ubocznym operacji, a to jest zła praktyka. Przykładem efektu ubocznego byłoby, gdyby operacja new zmodyfikowała wartość zmiennej globalnej.

Answer 3

Ta reguła liniowa jest przydatna i ważna. W przypadku korzystania z ramowym - na przykład Vue - które wykorzystują nowy efekt uboczny operator, spróbuj na pokrycie Anonimous funkcji przez dodanie trzech nawias

(()=>code)(); 

w kodzie

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