PythonDjangoVue项目创建过程详解_django内嵌套vue,直接启动

58 浏览量更新于2023-03-16 评论 3 收藏 87KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Python Django Vue 项目创建过程详解项目创建过程详解

主要介绍了Python Django Vue 项目创建过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价

值,需要的朋友可以参考下

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',

]

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38526914

粉丝: 7
资源: 910

会员权益专享

Python Django Vue 项目创建过程详解

评论0

会员权益专享

最新资源

Python Django Vue 项目创建过程详解

评论0

django项目实例（django 简易博客开发）

我如何使用 Django + Vue.js 快速构建项目.pdf

项目实战 Python Django 个人网站 电影推荐网站 完整代码

python django vue3

python django vue 前后端联通

python django 项目源码

python+django+vue3全栈开发商城项目

python django项目源码

python配置vue前端

python django项目实例源码

django vue 项目打包部署

django项目创建vue前端文件

django vue echarts demo代码

python django mysql 项目

Django vue怎么连接，怎么写代码

windows server服务器部署python django项目

python Django做网页

Python Django 项目实战餐厅

今日头条 优特教育 python django 博客项目 源码

python django web mysql项目

会员权益专享

最新资源

项目实战 Python Django 个人网站电影推荐网站完整代码

今日头条优特教育 python django 博客项目源码