Tornado and Vue x-template

当然，如果能用 webpack 系列工具进行开发构建当然是好，但是依然有一些项目的一些页面已经有了一些选型，你也不好从头再来对吧。

但是 Vue 这套设计思想真的很喜欢怎么办？

虽然网络上说有多达 7 种编写 Vue template 代码的方式，但是，综合考虑下来，其实除了 webpack 这种方式之外，你还能选择的还算优雅的，真的就只剩下 Vue x-template 了。

别的框架怎么支持以及兼容我不知道，我倒是只知道 Tornado 与 Vue x-template 的融合开发是怎么样的。

说多了也是废话，下面看核心部分代码：

// base.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    {% set DEBUG = handler.application.settings.get('debug', False) %}

    {% if DEBUG %}
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
    <script src="https://unpkg.com/axios@0.18.0/dist/axios.js"></script>
    {% else %}
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.min.js"></script>
    <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    {% end %}


    {% block head %}{% end %}

    <title>{% block title %}{% end %} - Document</title>
</head>

<body>
    
    {% block nav %}{% end %}
    {% block main %}{% end %}
    {% block bottom %}{% end %}

</body>

</html>

// count.html
<script type="text/x-template" id="count">
    <button v-on:click="count += inc">You clicked me {{! count }} times.</button>
</script>

<script type="application/javascript">
    Vue.component("count", {
        template: '#count',
        data: function () {
            return {
                count: 0
            }
        },
        props: ['inc',]
    })
</script>

// index.html
{% extends "base.html" %}


{% block head %}{% end %}


{% block title %}{% end %}


{% block main %}
{# x-template 需要定义在 Vue 所属的 DOM 元素外。 #}
{% include 'components/hello-world.html' %}
{% include 'components/count.html' %}
<div id="app">
    <hello-world :msg='msg'></hello-world>
    <count :inc=1></count>
    <count :inc=2></count>
    <count :inc=3></count>
</div>
{% end %}


{% block bottom %}
<script type="application/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'test',
        }
    })
</script>
{% end %}

它的组织结构极其类似于 .vue 的那种单文件组件，只不过这里则是 .html，以及 style 不是局部的，其它几乎就差异非常小了，非常值得使用。

关于模版语法的冲突问题，有两种解决方案，不过都是修改 Vue x-template 这部分的代码：

修改 Vue delimiters ；
修改 “{{” 为 “{{!"，这是来自于 Tornado 核心开发者 Ben Darnell 在 stackoverflow 的回复，所以我个人比较偏向于这种方法；

差不多就这么多了，趁感冒还没好，赶紧先留下点记录，要是有错误那就是我眼花导致的，请原谅。