内联单文件组件
我认为vue.js是AngularJS (1.x) webapp应用程序的迁移目标。
这个应用程序在其主页上加载了大量的“小部件”。
<script optimize-inline src="data/widgets/solargraph/solargraph.js"></script>
<script optimize-inline src="data/widgets/sensorgraph/sensorgraph.js"></script>
<script optimize-inline src="data/widgets/astralgraph/astralgraph.js"></script>这些小部件中的每一个都是定义自定义标记的自定义指令。
例如，data/widgets/astralgraph/包含以下文件
data/widgets/astralgraph/astralgraph.css
data/widgets/astralgraph/astralgraph.html
data/widgets/astralgraph/astralgraph.js并在主页中作为<astralgraph class="stickies-container"></astralgraph>实例。
.css通过下面的行被.html文件拉入
<link optimize-inline
rel="stylesheet"
type="text/css"
href="data/widgets/astralgraph/astralgraph.css?reload_times={@@ when @@}">.html文件通过templateUrl: 'data/widgets/astralgraph/astralgraph.html'在.js文件中被拉进来。
这通常会导致浏览器拉入每个.js文件，然后再拉入.html文件等等。
现在是最重要的部分。
有这些optimize-inline标记。
这些不是JavaScript使用的，而是被Python用于将小部件内联到主页中的。通过这种方式，浏览器只需要返回一个文件，不需要加载小部件文件(没有.js、.html和.css)，因为它们都位于(现在的大)主页中。
首先，.js文件的内容由服务器加载，插入到<script>-tag的主页中，但在编写<script>-tag templateUrl行解析之前，将.html文件的内容写入<script type="text/ng-template">-tag，如<script type="text/ng-template" id="data/widgets/astralgraph/astralgraph.html">...HTML IS HERE...</script>
这就是webapp的工作方式，与使用webpack之类的相比，它可能有它的缺点，但是它也有它的好处，我非常欣赏。
现在，我一直在检查迁移到vue.js的可行性，并且使用单文件组件(astralgraph.vue)和httpVueLoader解决了在不需要像webpack这样的构建系统的情况下创建小部件并加载它们的问题。
现在，我仍然无法将这些.vue文件内联到一个大的主页中。我如何在不诉诸webpack的情况下，通过在Python中使用with open('widgets/astralgraph.vue') as file: ...来对其进行归档？这并不意味着如何在Python中实现这一功能，而是如何构造生成的页面，使其成为一个有效的vue.js应用程序。
就像在AngularJS中，我从
/main.html
<script src="widget/example1.js"/>
<script src="widget/example2.js"/>
/widget/example1.js
/widget/example1.html
/widget/example1.css
/widget/example2.js
/widget/example2.html
/widget/example2.css至
/main.html
<!-- example1 -->
<style>content of example1.css</style>
<script type="text/ng-template" id="example1.html">content of example1.html</script>
<script>content of example1.js</script>
<!-- example2 -->
<style>content of example2.css</style>
<script type="text/ng-template" id="example2.html">content of example2.html</script>
<script>content of example2.js</script>在vue.js中，它将来自
/main.html
components: {
'example1': httpVueLoader('widget/example1.vue'), // optimize-inline
'example2': httpVueLoader('widget/example1.vue') // optimize-inline
},
/widget/example1.vue
/widget/example2.vue至
// this I don't know至于httpVueLoader('widget/...')行，我将调整它们并相应地对其进行调整。将.vue文件加载到XML解析器(如BeautifulSoup )中，在将.vue文件写入主页之前根据需要修改.vue文件内容也不是问题。它们可以有一个// optimize-inline注释，以便告诉服务器哪些组件应该内联，哪些组件不应该内联。本质上，它将是一个非常基本的绑定器，它将每个页面获取上的文件捆绑在一起。
对于那些想知道这个星图小部件是什么样子的人来说：
回答 1
Stack Overflow用户
发布于 2019-06-24 12:22:28
这是可能的，但您将失去使用scoped css的能力。
正常的、非优化的设置如下所示：
app.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>my-component.vue
<template>
<div class="hello">src: Hello {{who}}</div>
</template>
<style>
.hello {
background-color: #ffe;
}
</style>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
</script>然后，优化内联的文件将需要如下所示：
app.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--============== my-component begin ==============-->
<template id="my-component-template">
<div class="hello">src: Hello {{who}}</div>
</template>
<style>
.hello {
background-color: #ffe;
}
</style>
<script type="text/javascript">
Vue.component('my-component', {
template: '#my-component-template',
data: function() {
return {
who: 'world'
}
}
});
</script>
<!--============== my-component end ==============-->
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
//'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>因此，基本上，服务器需要以以下方式修改.vue文件的内容：
- 将
<template>重命名为<template id='my-component-template'> - 将
module.exports = {替换为Vue.component('my-component', { template: '#my-component-template',，并向脚本的最后一行添加一个关闭);。
然后将修改后的内容插入app.html文件并注释掉'my-component': httpVueLoader('my-component.vue')行，也可以选择删除<script src="https://unpkg.com/http-vue-loader"></script>行。
https://stackoverflow.com/questions/52348703
复制相似问题
腾讯云开发者
