我对Vue.js很新，目前面临（可能）基本问题 . 但经过几个小时的搜索，我仍然不确定如何解决它 .
对于某些项目，我使用riot作为数据绑定和组件的库（在暴动中称为'tags'） . 为了改善页面加载时间，我明确地只包括预编译标签（使用gulp完成），因此每个页面只加载它所需的内容 .
在特定页面上，它看起来像这样：
<body>
<div>
<p>Below will appear my tag</p>
<mytag></mytag>
</div>
<script src="/assets/js/mytag.js"></script>
<script>riot.mount('mytag');</script>
</body>
标签本身只是一个文件（mytag.tag），看起来像这样
<mytag>
<style>.test{color:blue}</style>
<span class="test">Lorem ipsum</span>
<script>const tag = this;<script>
</mytag>
我现在正试图用Vue.js来实现同样的意思，我想要一个我预先编译成JS（使用webpack），包含和渲染/挂载在页面上的文件 .
所以我创建了一个类似于我的防暴标记文件的vue文件
<template>
<div>
<span class="test">Lorem ipsum</span>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.test {color:blue}
</style>
这里开始我的问题：
我想在页面上实现和渲染模板就像暴动一样 . 但是我读过的所有教程都使用另一个JS文件（webpack的入口点），他们导入vue文件并创建一个新的Vue实例 .
import Vue from 'vue';
import myTag from './mytag.vue';
new Vue({
el:'#my-tag',
render: h => h(myTag);
});
但我试图避免额外的JS文件，因此使用vue文件作为webpack的入口点 . 这样我无法在页面上导入任何内容，但只包含预编译的vue文件 .
<script src="/assets/js/mytag.js></script>
<script>
new Vue({
el:'#my-tag',
render: ???????
});
</script>
正如您所看到的，当我只编译vue文件时，我不知道在页面上呈现组件的人 .
有人帮帮我吗？是否只是错误的方式试图避免额外的JS文件或是否有另一种我缺少的选项？
我只想以尽可能少的流量包含/渲染我的组件页面 .
- edit -
为了让我更清楚我正在努力解决的问题：使用JS文件（mytag.js）作为输入vue文件（mytag.vue）的入口点，创建 new Vue({}) 并呈现它，适合我 .
但是我还必须从后端传输数据（页面的HTML在服务器端呈现），当在捆绑的JS文件中创建新的Vue实例时，我不知道如何实现这一点 .
我的HTML看起来像这样
<script src="/assets/js/mytag.js"></script>
但我需要转移一些数据的可能性，就像我在暴动中那样，我在标签/标记处写入它（服务器端）
<body>
<div>
<p>Below will appear my tag</p>
<mytag sometext="text from backend"></mytag>
在riot标签中，我可以通过 opts.sometext 访问该数据 . 我发现了一个（我可以't imagine vue doesn' t为这个案子提供......）