Vue.js查看模型並在不同的文件中拆分

雖然在單個文件中一切正常。我無法將代碼拆分爲多個文件，然後綁定到.vue文件中。在這裏，我爲了簡單而給出了最終的.vue文件。Vue.js查看模型並在不同的文件中拆分

這裏是我的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>

感謝

來源

2016-07-14 Karim Mtl

要求，如果你不包括模塊加載器將不被定義。

來源

2016-07-15 07:37:27 gurghet

Vue.js查看模型並在不同的文件中拆分

回答

相關問題