django模板下，vue的使用（前后端不分离）

关于django+vue的结合使用

网上的相关教程基本上都是部署node.js,npm安装vue，生成vue项目，然后将vue项目部署至django，这些教程基本都建立在一个前提下，即前后端分离，关于前后端分离相关知识请自行搜索了解，简单来说就是对django服务器的请求，django的视图函数只返回json格式的字符串数据，这时候为了避免歧义，可以新建一个api.py代替原本views.py的导入。

然而我们在学习django的时候，通常都是views+templates的模式，很遗憾这是典型的前后端不分离的模式，当你想实现一些前端框架能够简单实现的炫酷效果时，你不可避免的想在你的前端页面设计中引入vue框架。因此，这篇教程将会告诉你如何方便快捷的直接在html中引用vue，而不是重构为前后端分离的模式去部署。当然前后端分离是大势所趋。

一、在你的templates中引入vue.js

目前最新的vue版本是vue3，在vue3中你是找不到vue.js的，取而代之的是vue.global.min.js文件
在你的模板文件中，一般是base_generic.html文件中进行cdn的外部引用，这里建议将最新版本的jquery一起引用。

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue