第一步:
-
创建django项目
django-admin startproject mysite
mysite为项目名,可以随意自定义
第二步:
-
在django项目根目录下创建vue脚手架
-
与manage.py文件同级的位置运行:
vue create frontend
frontend为脚手架的名字,可以随意。
第三步
-
settings.py文件中修改以下内容:
TEMPLATES = [
{
''''''
'DIRS': [BASE_DIR / 'templates'],
将上面路径修改为下面的路径,frontend表示脚手架名字。
'DIRS': [BASE_DIR / 'frontend/dist'], # 修改后,表示django模板从该路径下查找
''''''
]
添加:
STATICFILES_DIRS = [
os.path.join(BASE_DIR,"frontend/dist/static"),
]
# 表示项目的静态文件的目录路径
第四步:
- 项目文件中的urls.py文件中添加以下内容:
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path(r'', TemplateView.as_view(template_name="index.html")), # 添加
]
第五步:
- 修改vue脚手架的vue.config.js文件:
module.exports = defineConfig({
'''''
assetsDir:'static' // 添加
})
第六步:
- 对vue脚手架中的文件进行打包
npm run build
最后即可运行django,即可看到vue脚手架中的页面了