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

});

...

它以这种方式按预期工作，但是当我尝试在另一个文件中创建一个新的Vue实例时（例如在search.js中）我无法做到。我在控制台中收到'未捕获的引用错误：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是一个例外）。

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

1 个答案: