有没有办法将vue文件页面和代码分开写？

Question

比如：import app from '../..'
template:app

Answer 1

vue有提供一个Vue.compile( template )
可以借助这个API实现Vue Loader中模板与代码分开的需求

---

刚才测试了一下，还有一种方式。写2个.vue文件

a.vue [模板文件]

<template>
  <div>
    <button @click="onClick">{{ message }}</button>
  </div>
</template>

b.vue [代码文件]

<script>
  import template from './a';

  export default {
    render: template.render,
    data() {
      return {
        message: '测试',
      };
    },
    methods: {
      onClick() {
        console.log('click');
      },
    },
  };
</script>

我是不会这样写，感觉更复杂，但不失为一种办法

Answer 2

还有一个办法，app.vue写模板:<template/> <script src='app.js'/> <style/>另一个文件app.js写代码，行不行

Answer 3

如果按照题主的意思，这又回到最初的表现行为分离的时代了。

.vue 文件就是为了解决分离

下面代码，看是否如愿？

tpl.js

exports.default = `
<div>name:{{name}}</div>
`

index.js

const Vue = require('vue')
const template = require('./tpl.js')
exports.default = Vue.extends({
  template,
  data: () => ({ name: 'zhangshan' })
})