Vue.js 在 Vue 文件中创建根 Vue 实例

您所描述的内容是在Webpack和Vue Loader的预编译步骤中完成的.Vue编译器实际上并不解析Single File Components.Vue编译器can解析的是组件的选项对象中提供的模板.所以，如果你在componentConfig对象中提供template选项，你的例子就行了.否则，您必须使用Webpack和Vue Loader完成预编译步骤，才能解析单个文件组件的模板.要做到这一点，你必须遵守证监会的 struct .这里有一段摘录..

Template

• 每个*.vue文件一次最多只能包含一个<template>块
• 内容将被提取并传递到vue-template-compiler和vue-template-compiler

Script

• 每*.vue个文件一次最多只能包含一个块.
• 该脚本作为ES模块执行.
• The 102 should be a Vue.js 100. Exporting an extended constructor created by 101 is also supported, but a plain object is preferred.
• 与.js个文件(或扩展名)匹配的任何网页包规则

为了使你的具体例子有效，你可以像这样重写main.js个文件..

const MyComponent = require("./MyComponent.vue");

const el = ".container";
const data = {
  name: "Jess"
};

MyComponent.create(el, data);

还有你的MyComponent.vue文件(这就像下面提到的@Ferrybig一样是js文件)..

<script>
const Vue = require('vue');

function create(el, data) {
  const componentConfig = {
    el,
    name: "my-component",
    data,
    template: `<div>Hello {{ name }}!</div>`
  };
  const vm = new Vue(componentConfig);
  return vm;
}

module.exports = { create };
</script>

看到这个了吗

或者，如果你更喜欢渲染函数，你的MyComponent.vue会是这样的..

<script>
const Vue = require('vue');

function create(el, data) {
  const componentConfig = {
    el,
    name: "my-component",
    data,
    render(h) { return h('div', 'Hello ' + data.name) } 
  };
  const vm = new Vue(componentConfig);
  return vm;
}

module.exports = { create };
</script>

CodeSandbox

One last thing to keep in mind:在任何组件中，您都可以使用模板或渲染功能，but not both就像您在示例中所做的那样.这是因为其中一个将覆盖另一个.例如，请参见JSFiddle Vue boilerplate，并注意模板是如何被覆盖的.这可以解释你所犯的错误.渲染函数优先，但您为其提供了组件的选项对象，该对象不提供要渲染的模板.