Vue.js 视图模型并在不同文件中拆分答案

【问题标题】：Vue.js view model and splitting in different filesVue.js 视图模型并在不同文件中拆分
【发布时间】：2016-07-14 17:19:49
【问题描述】：

虽然在单个文件中一切正常。我无法将代码拆分为多个文件，然后捆绑在一个 .vue 文件中。为了简单起见，我在这里给出最终的 .vue 文件。

这是我的 html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using databinding with components</title>
</head>
<body>
<h1>This is databinding</h1>
<databinding></databinding>

<script src="build/bundle.js"></script>
</body>
</html>

我的 js 文件

//databindingcomponent.js
var Vue = require('vue')
var Databinding = require('./components/databinding/databinding.vue')

new Vue({
    el: 'body',
    components: {
        databinding: Databinding
    }
})

我的 vue 文件（./components/databinding/databinding.vue）

<template>
<div id="example1">
    Hello {{ name }}, the date is {{ date }}!
</div></template>

<script>
var Vue = require('vue')

var exampleData = {
    name: 'Vue.js',
    date: '2016-07-13'
}

// create a Vue instance, or, a "ViewModel"
// which links the View and the Model
var exampleVM = new Vue({
    el: '#example1',
    data: exampleData
})</script>

然后我运行

.\node_modules\.bin\browserify -t vueify -e .\databindingcomponent.js -o .\build\bundle.js

我得到的错误如下：

databindingcomponent.js:2 Uncaught ReferenceError: require is not defined(anonymous function) @ databindingcomponent.js:2

这是单个文件中的代码（它可以工作，但我想将其拆分为 .html 和 .js 并使用最终的 .vue 文件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>

<div id="example1">
    Hello {{ name }}, the date is {{ date }}!
</div>

<script>
    var exampleData = {
        name: 'Vue.js',
        date: '2016-07-13'
    }

    // create a Vue instance, or, a "ViewModel"
    // which links the View and the Model
    var exampleVM = new Vue({
        el: '#example1',
        data: exampleData
    })
</script>
</body>
</html>

谢谢

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

如果不包含模块加载器，则不会定义Require。

【讨论】：