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 的回复,所以我个人比较偏向于这种方法;
差不多就这么多了,趁感冒还没好,赶紧先留下点记录,要是有错误那就是我眼花导致的,请原谅。