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

How to refer URL into Vue.Template link. Template is longer and all operations are going to include to mounted/methods.

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

解决方案

You could read the local HTML file as a string, and then load the result into the template field. With a module loader (such as Webpack), you would use require() to import the HTML file:

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

Alternatively, if vue-loader is available to your project, you could use single file components, which allow importing the template from an external file:

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

demo