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/3.3.4/vue.global.min.js"></script>

二、关于vue与django模板变量的冲突问题

vue框架对于变量的读取默认是{{}}，django模板变量同样是这个，所以会产生冲突，所以最简单的方法就是改变vue框架的模板变量引用方式，在createApp函数中加入
compilerOptions: { delimiters: ['${', '}'] }

三、示例

vue函数记得包含在文档加载完成的事件监听函数内。

<div id="app">
${ vuemessage }
</div>
<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/3.3.4/vue.global.min.js"></script>
<script>
//veujs代码
document.addEventListener('DOMContentLoaded', function() {
      const { createApp, ref } = Vue;
      if (typeof Vue !== 'undefined') {
        createApp({
          compilerOptions: {
            delimiters: ['${', '}']
          },
          data() {
            return vuemessage
          }
         }).mount('#app');
      }
    });
</script>

结语

这样django+vue的混用就搞定了，但是还是建议去学习以下前后端分离的使用，django是有专门的前后端分离的支持的。