python之django与vue结合教程
关于平台，将基于Python+Django结合Vue.js前端框架，采用前后端分离的方式开发
其中，django负责后端接口数据层，Vue-cli负责前端页面开发
下篇专门讲下vue，本篇讲下vue安装，整个框架的搭建
一、首先，需创建django项目
具体查看上一篇内容：创建django项目
二、下载安装vue
1、第一步下载node语言：https://nodejs.org/zh-cn/download/，v16.16.0下载后自动有npm命令
查看下node_module下是否有vue.cmd
如果没有需要操作：npm install -g vue
然后，输入以下命令：// 卸载
npm uninstall vue-cli -g
2、第二步：下载安装vue-cli: npm install -g @vue/cli@3.12.1
3、安装完成后，通过如下任意指令查看vue的版本：
vue --version / vue –V
但是，还是报错：‘vue’ 不是内部或外部命令。
4、还需要配置环境变量
5、cmd 输入 npm config list 查看目录，找到 prefix 目录下对应的地址。
6、在“系统变量”部分选中path一行，添加5中对应的地址
验证：vue --version / vue –V 安装成功
三、创建前端项目：
打开cmd窗口：
cd django的项目根目录
vue create 项目名
一步步配置，如下图：
image.png
四、django与vue结合使用
打包：vue-cli前端单独写页面，所有页面会有一个入口html,叫做index.html；之后打包成一个文件夹。
这个文件夹给django项目使用，
之后的平台，仍只启动一个django项目即可；因开发和物理地址，前后端都是分离的，并可以独立调试
image.png
第一步：
打包命令: npm run build
vue打包：dist包就是成果物的包
第二步：
引入包，进行导入
from django.views.generic import TemplateView
urlpatterns = [
path('index/',TemplateView.as_view(template_name='index.html'))
]
第三步：
通过setting配置,将模板的路径加入
TEMPLATES = [
{
'DIRS': ['project_v/dist'], # 模板的路径引入
第四步：
从vue下的dist包中获取
import os
# 整个项目都有一个基本路径BASE_DIR，
STATICFILES_DIRS = [os.path.join(BASE_DIR,'project_v/dist/static')]
第五步：处理跨域
像我们这个项目一半是后端渲染的，一半是前后端分离的。他们之间的要求打通还要解决跨域问题，其实还是比较有难度的。
#下载
pip install django-cors-headers
setting.py:
#解决跨域
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 下载，处理跨域
#'django.middleware.csrf.CsrfViewMiddleware', # 去校验
#'django.middleware.clickjacking.XFrameOptionsMiddleware', # 处理中间件
]
CORS_ORIGIN_ALLOW_ALL = True
public、index.html
组成：
main.js是管理者，来把id = “app”的div进行填充；
main.js把App.vue塞进了div里；
App.vue里面调用了两个路由；分别是 / 和 /about
两个路由在router.js中控制
/about对应返回两个页面
里面有：
static文件夹：把vue项目内所有的静态资源都塞进去，以供django使用
dist中的index.html 是由public/index.html打包后产生的
index.html中有id = “app”,app通过main.js，将app.vue的内容传入，app.vue中有两个路由: route-link,导入模块home,
于是将views/home.vue中的内容传过来
第六步：下载vue组件（后缀是 .vue的文件）
下载：npm i element-ui -S
安装：bootstrap : npm install bootstrap --save
改main.js
# 导入并使用
import ELementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ELementUI)
# 引用element-ui
<el-button :plain="true" @click="open">打开消息提示</el-button>
# 自己写
<button style="padding: 10px;height: 35px;border-radius: 5px;
background-color: white;">打开消息提示原生</button>
第七步：分析Vue里面：
dom层和bom层
dom层放的就是元素 <template> <div></div></template>
bom层放的基本是脚本代码
vue-cli里面的所有.vue组件的写法
template/div 内写所有的元素dom层
在export default{} 内写所有的bom层代码
style存放所有的样式
export default {
name: ''
data(){
return{
# 写所有的数据
}；
},
methods:{
# 放所有的函数
},
components:{
},
}
image.png
<style>
html,body{
height: 100%;
margin: 0;
}
</style>
element 组件<el-container>被浏览器翻译成原生组件section
vue-cli的静态外部资源放在哪里？
public/static内
引用: /static/...
