как ссылаться на 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

Я решаю это ограничение, используя requirejs ( хотя это не рекомендуется).

Вы можете загрузить текст из html-файла, добавив 'text!' перед URL шаблона и загрузить его в виде текста, подобного:

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

, а затем используйте его в качестве строки шаблона:

...    
    template : template
...

Answer 2

Вы можете прочитать локальный файл 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" />

демо