Question

我正在考虑将vue.js用作AngularJS（1.x）Web应用程序的迁移目标。

此应用程序在其主页上加载了很多“小部件”

<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>标签中，但在写入<script>标签之前，{{1 }}行被解析，将templateUrl文件的内容写入.html标签中，例如<script type="text/ng-template">

这是webapp的工作方式，与使用webpack或类似工具相比，它可能有其缺点，但我有很多好处。

现在，我一直在研究转移到vue.js的可行性，并结合使用单个文件组件（<script type="text/ng-template" id="data/widgets/astralgraph/astralgraph.html">...HTML IS HERE...</script>和httpVueLoader解决了能够创建小部件和加载的问题他们不需要像webpack这样的构建系统。

现在，我仍然缺少将这些astralgraph.vue文件内联到一个大主页中的功能。如何在不借助webpack的情况下而是通过在Python服务器中使用.vue来归档此文件？通过这种方式，我并不是说如何在Python中实现此功能，而是要如何构造结果页面以使其成为有效的vue.js应用。

就像AngularJS一样，我的转换方式是

with open('widgets/astralgraph.vue') as file: ...

到

/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

在vue.js中，它将来自

/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>

到

/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/...')文件加载到类似BeautifulSoup的XML解析器中以在写入主页之前根据需要修改.vue文件的内容也不是问题。他们可以有一个.vue注释，以告诉服务器应该内联哪些组件，而不应该内联。从本质上讲，这将是一个非常基本的捆绑程序，该捆绑程序会在每次抓取页面时捆绑文件。

对于那些想知道这个星状图小部件是什么样的人

Answer 1

这是可能的，但是您将失去使用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>行。

内联单个文件组件

1 个答案: