Browserify 和 Vue：未捕获的引用错误：未定义 Vue

Question

这是我第一次涉足任何前端开发，除了基本的 jQuery 东西，我正在使用 Vue.js 以及其他一些带有 Browserify 的包。我的主要“app.js”如下所示：

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!'
    },

});

...

它以这种方式按预期工作，但是当我尝试在另一个文件中（例如在 search.js 中）创建一个新的 Vue 实例时，我做不到。我在控制台中收到“未捕获的引用错误：未定义 Vue”。在其他地方使用其他必需的包没有问题 - 虽然我不明白为什么我需要以我正在做的方式导入 jQuery ......如果我这样做它将无法工作：

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

我确信这是我还不理解的非常基本和基本的东西，但任何帮助将不胜感激！

Answer 1

您遇到的问题是使用模块的基础知识。一般来说，一个模块应该总是导出一些行为或属性，然后你需要那个模块并使用它。例如，假设我想在某些页面上的表单中添加隐藏。我会这样做：

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 是一个例外）。