django 与 Vue 的结合使用说明

1、第一步有一个Django项目

  先是创建一个Django项目

    django-admin startproject demo

  然后创建一个application应用

    python manage.py startapp app1

  最后将App1注册到Django应用中去

2、第二步在Django的项目目录下,创建Vue项目

  1、首先安装node.js,官网地址:https://nodejs.org/zh-cn/download/

  2、使用npm淘宝镜像,避免npm下载速度过慢的问题   npm install -g cnpm --registry=https://registry.npm.taobao.org 

  3、用npm安装vue-cli脚手架工具(vue-cli是官方脚手架工具,能迅速帮你搭建起vue项目的框架):

    `npm install -g vue-cli`
 
4、创建一个Vue项目,使用命令
    vue init webpack appfront
  创建项目会出现各种配置,可以默认,然后出现两行命令提示
    cd appfront #进入vue项目目录
    npm run dev #测试vue项目是否成功创建

* npm run build        ## 打包vue项目,会将所有东西打包成一个dist文件夹  
好了,两个项目都创建成功了,只需要通过桥梁,连接在一起就行
1、替换Django模板路径
  

2、配置静态文件路径

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'appfront/dist/static')]
最后:配置Django路由

from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
]

最后启动Django项目,python manage.py runserver

看路由端口,是8000说明成功了,Vue默认端口是8080
这样就可以实现前后端分离了,嘎嘎嘎。。。

原文地址:https://www.cnblogs.com/wbdream/p/10569918.html