Question

尽管单个文件中的所有内容都能正常运行。我无法将代码拆分为多个文件，然后捆绑在.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并使用final .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>

由于

Answer 1

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

Vue.js查看模型并拆分成不同的文件

1 个答案: