如何将 URL 引用到 Vue.Component.Template 中

Question

如何将URL引用到Vue.Template链接中。 模板更长，所有操作都将包括挂载/方法。

Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: './views/templatebutton.html'   //how to refer URL here.
})

Answer 1

您可以将本地 HTML 文件作为字符串读取，然后将结果加载到template字段中。使用模块加载器(例如 Webpack(，您可以使用require()来导入 HTML 文件：

// Foo.js
Vue.component('button-counter', {
template: require('./views/templatebutton.html')
})

或者，如果vue-loader可用于您的项目，则可以使用单个文件组件，这些组件允许从外部文件导入模板：

<!-- Foo.vue -->
<template src="./views/templatebutton.html" />

演示

Answer 2

我使用 requirejs ( 虽然不推荐(。

您可以通过在模板 url 之前添加'text!'来从 html 文件加载文本，并将其加载为文本，如下所示：

var template = require('text!/assets/vuejs/controllers/venda_direta/cart.html');

然后将其用作模板字符串：

...    
template : template
...