Python Django Vue 项目创建过程详解
作者:Blue·Sky 时间:2022-03-28 22:06:38
1、创建项目
打开pycharm 终端,输入如下,创建项目
# 进入pycharm 项目目录下
cd pyWeb
django-admin startproject pyweb_dome
# pyweb_dome 是django项目名称
2、创建应用
# 进入项目根目录 pyweb_dome 下
cd pyweb_dome
python manage.py startapp webserver # webserver 为应用名
3、创建前端项目
使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端
# 使用vue-cli在根目录创建一个名称叫【webfront】的Vue.js项目作为项目前端
vue-init webpack webfront
4、打包vue项目
# 使用 webpack 打包vue项目
cd webfront
npm install
npm run build
此时直接运行npm run dev也可以直接查看前端 vue界面
npm run build
构建完成会生成一个文件夹,名字叫dist,里面有一个 index.html 和一个 文件夹static。
5、使用Django的通用视图 TemplateView修改静态指向路径(就是让Django访问目录指向我们刚才打包的dist/index.html)
找到项目根 pyweb_demo/urls.py文件作出如下修改,注意1、2两处修改。
"""pyweb_dome URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView # 1、增加该行
urlpatterns = [
path('admin/', admin.site.urls),
path(r'',TemplateView.as_view(template_name='index.html')), #2、 增加该行
]
6. 配置Django项目的模板搜索路径和静态文件搜索路径 找到根目录下 pyweb_demo/settings.py文件并打开,找到TEMPLATES配置项,修改如下:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#'DIRS': [],
'DIRS': ['webfront/dist'], # 修改1
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
# 新增2
# Add for vue.js
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "webfront/dist/static"),
]
7,到此基本就配置完成了,回退到根目录 运行命令就可以直接查看效果
python manage.py runserver
来源:https://www.cnblogs.com/BlueSkyyj/p/11172433.html
标签:python,django,vue,项目,创建
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python中set()函数简介及实例解析
2022-05-15 17:12:24
python opencv鼠标画点之cv2.drawMarker()函数
2021-11-28 18:34:40
![](https://img.aspxhome.com/file/2023/5/87745_0s.png)
Python matplotlib实用绘图技巧汇总
2023-10-05 01:12:39
![](https://img.aspxhome.com/file/2023/2/117312_0s.png)
python算法与数据结构之单链表的实现代码
2022-09-30 14:35:39
![](https://img.aspxhome.com/file/2023/0/98820_0s.png)
一份python入门应该看的学习资料
2023-04-08 15:09:57
![](https://img.aspxhome.com/file/2023/7/109987_0s.jpg)
ASP.NET Core MVC基础学习之局部视图(Partial Views)
2023-07-19 21:02:37
设计高效的faq页面
2011-06-10 13:13:00
Python实现随机从图像中获取多个patch
2021-09-19 13:39:56
![](https://img.aspxhome.com/file/2023/0/97120_0s.jpg)
详解Python中的Lock和Rlock
2023-08-11 18:35:20
python tornado开启多进程的几种方法
2021-09-18 22:28:17
python数据结构之面向对象
2021-04-09 08:02:06
![](https://img.aspxhome.com/file/2023/0/94120_0s.png)
老版本PHP转义Json里的特殊字符的函数
2023-11-06 02:32:18
python使用代理ip访问网站的实例
2022-02-08 08:16:36
![](https://img.aspxhome.com/file/2023/5/85105_0s.jpg)
Python使用shutil操作文件、subprocess运行子程序
2021-03-01 00:19:19
Python控制windows系统音量实现实例
2022-07-29 12:09:46
![](https://img.aspxhome.com/file/2023/0/95210_0s.png)
Python 学习教程之networkx
2023-10-11 01:49:07
Python reduce函数作用及实例解析
2023-10-10 22:27:47
![](https://img.aspxhome.com/file/2023/4/107494_0s.png)
用JS实现渐变效果,兼容各款浏览器
2008-09-13 19:10:00
Python设置Word全局样式和文本样式的示例代码
2022-06-29 05:06:07
![](https://img.aspxhome.com/file/2023/8/82558_0s.jpg)
Python使用matplotlib实现基础绘图功能示例
2023-08-31 03:24:02
![](https://img.aspxhome.com/file/2023/1/109381_0s.png)