Vue 2.0 thiết lập tuyến đường - Không sử dụng 'mới' cho các tác dụng phụ

Question

Tôi đang định cấu hình dự án vue. Tôi đã sử dụng mẫu webpack. (npm install init webpack). Tôi nhận được một lỗi trong thiết bị đầu cuối -

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 

Đây là 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) 
}) 

Cảm ơn

Answer 1

Lỗi đó đến từ trình định dạng mã eslint của bạn, không phải từ chính Vue.js.

Môi trường webpack của bạn được định cấu hình để xác minh mã trước khi nó xây dựng và khởi động ứng dụng của bạn. Trong khi làm điều đó, eslint đưa ra cảnh báo đó.

Để tránh nó, làm như sau (trong vòng 5 dòng cuối cùng của main.js bạn tập tin):

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

gì bạn đang làm trên là vô hiệu hóa cảnh báo eslint cho new chỉ trong dòng trên . Giờ đây, webpack của bạn sẽ khởi động ứng dụng của bạn bình thường.

Tùy chọn khác là đặt quy tắc trong .eslintrc.js (trong thư mục gốc của dự án), nơi bạn có thể chỉ định rằng quy tắc no-new sẽ bị bỏ qua. (không được đề xuất trong trường hợp này)

Answer 2

Bạn chưa gán giá trị của báo cáo kết quả new Vue(...) để bất cứ điều gì.

Tuyên bố new tạo một phiên bản mới của đối tượng. Thông thường, cá thể này được gán cho một biến. Nếu bạn không gán cá thể cho một biến, thì đó là rác được thu thập.

Linter là giả định rằng, vì bạn không giữ một tham chiếu đến dụ mới, bạn đang dựa vào một tác dụng phụ từ hoạt động, và đây là một thực tế xấu. Một ví dụ về một tác dụng phụ sẽ là nếu hoạt động new sửa đổi giá trị của một biến toàn cục.

Answer 3

Quy tắc lót này hữu ích và quan trọng. Nếu bạn sử dụng bất kỳ khuôn khổ - ví dụ vue - mà sử dụng mới tác dụng phụ điều hành, cố gắng che đậy trong anonimous chức năng bằng cách thêm ba ngoặc

(()=>code)(); 

trong mã của bạn

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