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

Python Django Vue 项目创建过程详解

Python Django Vue 项目创建过程详解

来源:https://www.cnblogs.com/BlueSkyyj/p/11172433.html

标签:python,django,vue,项目,创建
0
投稿

猜你喜欢

  • 在pytorch 中计算精度、回归率、F1 score等指标的实例

    2022-08-10 06:28:18
  • python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能

    2021-12-29 06:55:13
  • Python爬取新型冠状病毒“谣言”新闻进行数据分析

    2021-06-14 04:47:33
  • oracle常用函数汇总(分享)

    2024-01-12 17:03:56
  • Python的gevent框架的入门教程

    2023-06-26 16:58:34
  • Python快速优雅的批量修改Word文档样式

    2022-09-23 19:28:22
  • IE6实现min-width

    2008-06-12 12:40:00
  • JavaScript简单编程实例学习

    2024-04-29 13:24:52
  • oracle学习笔记(三)

    2012-01-05 19:28:42
  • Mysql全文搜索match against的用法

    2024-01-19 16:30:57
  • linux系统中重置mysql的root密码

    2024-01-14 06:16:45
  • 如何远程连接SQL Server数据库

    2009-06-08 12:41:00
  • Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

    2024-04-10 13:52:57
  • Python catplot函数自定义颜色的方法

    2021-01-29 16:25:01
  • 浅谈JavaScript中你可能不知道URL构造函数的属性

    2024-04-17 10:03:03
  • Asp中Server.ScriptTimeOut脚本超时属性需要注意的一点

    2008-10-18 14:53:00
  • 精简版的MySQL制作步骤

    2011-03-08 09:52:00
  • 教你快速掌握更改表中列顺序的好方法

    2008-11-27 17:14:00
  • 利用Python实现好看的水波特效

    2023-05-26 22:23:53
  • MySQL5.7.21解压版安装详细教程图解

    2024-01-25 10:23:57
  • asp之家 网络编程 m.aspxhome.com