Browserify和Vue：未捕獲的參考錯誤：Vue沒有定義

這是我第一次涉及任何前端開發，超越了基本的jQuery的東西，我使用Vue.js以及一些其他包與Browserify。我的主要「app.js」看起來是這樣的：Browserify和Vue：未捕獲的參考錯誤：Vue沒有定義

window.$ = window.jQuery = require('jquery'); 
require('bootstrap'); 
var moment = require('moment'); 
var fullCalendar = require('./vendor/fullcalendar.min.js'); 
var datetimepicker = require('./vendor/bootstrap-datetimepicker.min.js'); 
var select2 = require('./vendor/select2.min.js'); 
var VueResource = require('vue-resource'); 
var Vue = require('vue'); 
require('./videos/show.js'); 
require('./home.js'); 
require('./search.js'); 

Vue.use(VueResource); 

new Vue({ 
    el: '#search', 

    data: { 
     message: 'Hello World!' 
    }, 

}); 

...

它將按預期這種方式，但是當我嘗試創建另一個文件中的新的Vue實例（search.js，例如）我可以」不要這樣做。我的控制檯中出現'Uncaught參考錯誤：Vue未定義'。

var $, jQuery = require('jquery');

我：雖然我不明白爲什麼我需要導入jQuery的我做它的方式......如果我這樣做，它不會工作 - 用其他所需的軟件包在其他地方沒問題我確定這是非常基本和基本的東西，我不理解，但任何幫助將不勝感激！

來源

2015-06-14 dorian108

是否將Vue導入search.js，就像上面的文件一樣？使用CommonJS，你不想也不應該使用全局變量。您需要每個文件中的每個依賴項。 – Cymen

我還看到很多'require'調用，而不需要將事物分配給某些東西 - 我期望看到'var x = require（'x'）'...這表明您正在使用大量的全局變量也是一種氣味。如果它是針對jQuery之類的，但對於您自己的模塊則是一回事，這表明該概念的某些部分沒有意義。我建議閱讀一些更多的指南，直到它點擊。 – Cymen

是的，我想我錯過了基本的概念。之前，我在登錄頁面上有一個腳本，它使用jstimezonedetect來獲取用戶的時區，並將其存儲在一個隱藏的輸入中，我將其與用戶憑證一起發送到服務器。現在，如果我需要該腳本，則在每次頁面加載時調用該函數，並且該腳本試圖將其返回值分配給$（'＃timezone'）元素。對我來說沒有意義。我所有的js都在特定頁面上的特定元素上進行操作。你有什麼建議要閱讀以加快速度？ – dorian108

您遇到的問題是使用模塊的基礎知識。通常，模塊應該總是導出一些行爲或屬性，然後您需要該模塊並使用它。例如，假設我想在某些頁面上將隱藏添加到表單中。我這樣做：

AddSecretToken.js

module.exports = function(form) { 
    // code here to add the hidden input to the passed in form 
}

然後在其他地方，我有這樣的需要的祕密輸入的表單，我需要它：

MyForm.js

var addSecretToken = require('./AddSecretToken'); 

... 
// some code that makes a form 
addSecretToken(myForm); 
...

顯然，在某些時候，你需要一些實際運行某些代碼的代碼，但這將是你的根模塊或者你需要根模塊的頁面。所以也許你在頂部有一個app.js，它需要它所需要的，然後運行app()而不導出任何東西。這就說得通了。但大多數模塊不應該這樣做。當你需要某些行爲時，你應該製作一個模塊，然後在你需要這個行爲的任何地方，你需要這個模組。每個模塊都應該要求它依賴於它 - 它不應該依賴於任何全局（有時jQuery是一個例外）。

來源

2015-06-14 18:22:25 Cymen

感謝您花時間幫助我！但在你的例子中，MyForm.js包含在哪裏？它會在我的app.js中被需要嗎？它是否也包含在表達式中：module.exports = function（）{...} – dorian108

是的，它將包含在app.js或app.js要求的某個地方（它可能遠遠低於require樹if你認爲require tree是以app.js需要的模塊開始的）。我建議你學習一些NodeJS風格的代碼，即使你不想使用NodeJS作爲服務器，因爲它一遍又一遍地顯示了CommonJS模式。 – Cymen

再次感謝！現在就開始挖掘節點。對於我目前在後端使用Laravel的項目（及其Blade模板系統），我想也許這是一個很好的方法，因爲我的大部分js代碼都是特定於頁面的：http://stackoverflow.com/問題/ 21805308 /共享 - 通用代碼 - 跨頁面與瀏覽器...你認爲這是一個好方法嗎？ – dorian108

Browserify和Vue：未捕獲的參考錯誤：Vue沒有定義

回答

相關問題