FastAPI jinja2前后端不分离使用Vue+elementUI

最近写了一个小站点，本来想用前后端分离写的，但是感觉没必要，小站点流量估计也不大，就直接用模版写就ok了

还有就是用Vue脚手架的话，是SPA单页面，很不利于SEO(部分言论说百度爬虫会抓取js渲染后的页面)。

但是我还是想用Vue，把Vue当成Jquery用，还要加上ElementUI一起。尤大也说过国外很多把Vue代替JQ的，毕竟数据驱动实在太舒服了。

参考知乎 https://www.zhihu.com/question/51949678

修改语法冲突

参考链接：

• 李辉个人博客 http://greyli.com/jinja2-and-js-template/
• 李辉jinja2语法 http://greyli.com/flask-template-engine-jinja2-syntax-introduction/

我一开始本来是想修改Vue的模版语法的

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})

但是这样做 就有些问题， 我使用ElementUI就有问题，所以不能这样做。
直接修改jinja2的模版语法，网上都是flask的资料。

from fastapi.templating import Jinja2Templates

router = APIRouter()
templates = Jinja2Templates(directory="templates")

# 避免和vue语法冲突 修改jinja2模版语法标签
templates.env.block_start_string = '(%'  # 修改块开始符号
templates.env.block_end_string = '%)'  # 修改块结束符号
templates.env.variable_start_string = '(('  # 修改变量开始符号
templates.env.variable_end_string = '))'  # 修改变量结束符号
templates.env.comment_start_string = '(#'  # 修改注释开始符号
templates.env.comment_end_string = '#)'  # 修改注释结束符号

@router.get("/")
async def index_view(request: Request):
    return templates.TemplateResponse(
        "index.html",
        {
            "request": request,
            "id": 666,
        }
    )

这样改就好了，可以愉快的使用Vue+ElementUI + jinja2了，又想起当初 辉哥知乎上送我的 《Flask Web开发实战》

时间过得好快，一眨眼，而我还是那个小菜鸡。

题外话 Vue 3.0 终于来了

https://github.com/vuejs/vue-next/releases/tag/v3.0.0

One Piece 学起来吧，又不能假装看不见！

结语

现在FastAPI很多资料都不全，但是可以仿照着搜Flask的资料。