django-admin startproject yiyan_webauto

python manage.py startapp myapp

python3 manage.py runserver

from django.contrib import admin
 
# Register your models here.
import inspect,sys
from myapp.models import *
 
cls_members = inspect.getmembers(sys.modules[__name__],inspect.isclass)
for name,cls in cls_members:
     admin.site.register(cls)

INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'myapp',
]

MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'corsheaders.middleware.CorsMiddleware', #第三方解决跨域头问题的中间件
     'django.middleware.common.CommonMiddleware',
     # 'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     # 'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True #加上允许所有跨域

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/shanghai'

npm install -g @vue/cli@3.12.1

vue create front

front
     dist 打包生成目录
         static 来自public/static，static是项目创建后手工创建的文件夹
             css 手工创建
                 app.xxx.css 来自/src/App.vue里面的style标签的内容
         js
             about.xxx.js /src/views/About.vue被webpack打包后的js文件
                 about.xxx.js.map webpack打包信息
             app.xxx.js /src/views/Home.vue被webpack打包后的js文件
                 app.xxx.js.map webpack打包信息
             chunk-vendors.xxx.js
                 chunk-vendors.xxx.js.map
            
     node_modules vue框架需要的依赖包
     public 静态资源,这里有一个index.html 模板,作为合成最终dist/index.html的骨架存在
     src
     assets 存放一些静态文件，现在我们不用这个,之后全部存到public/static下
     components 小型组件存放位置
         HelloWorld.vue 子组件
     views 大型组件，母体组件存放位置
         About.vue 母组件
         Home.vue 母组件，里面引入了子组件HelloWorld.vue，所以在访问Home页面的时候会看到HelloWorld页面的内容
     App.vue 作为所有的.vue的一个主管存在，存放uri(/和/about),里面的样式会影响全局（id=app的div）
     main.js : 作为打包过程必要的主脚本，负责把id=app的div进行填充，里面的代码会影响全局
     router.js: 路由管理器，根据path(App.vue里面的uri)映射具体页面（component：Home），Home就是views文件夹里面的vue母组件Home.vue
     vue.config.js

import Vue from 'vue'
import App from './App.vue' # 引入App.vue，取名为App
import router from './router'
 
Vue.config.productionTip = false
 
# 把App.vue填充到public/index.html的id=app的div里面
new Vue({
     router,
     render: h => h(App)
}).$mount('#app')

module.exports = {
assetsDir:'static'
}

from django.views.generic import TemplateView
path('index/',TemplateView.as_view(template_name='index.html')) # 加了这一行，就是把django的index这个uri指向front/dist/index.html页面，而不是再去django的views里面 这一步只是项目搭建阶段，验证django和vue的打通，后续开发，前端直接请求后端域名接口就好了
 
settings.py中，修改TEMPLATES的DIRS,其他不变：
TEMPLATES = [
     {
     ...
     'DIRS': ['front/dist'], # 指定django模板路径，让django在读取html时从前端项目front的打包目录dist取index.html
     ...
     }

STATICFILES_DIRS=[
     os.path.join(BASE_DIR,"front/dist/static"),
]