django项目与vue项目结合使用详解

0. 第一步：创建django项目

先是创建一个Django项目

django-admin startproject demo

然后创建一个application应用

python manage.py startapp app1

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

1. 第二步在Django的项目目录下，创建Vue项目

首先安装node.js

node.js官网：https://nodejs.org/zh-cn/

node.js早起各个版本：https://nodejs.org/zh-cn/download/releases/

windows7下载node12.18.4版本

 cmd终端输入node -v     和npm -v检测是否安装成功

2. 使用淘宝npm镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 项目初始化

（1）第一步：安装vue-cli，在命令提示符中输入  

cnpm install vue-cli -g //全局安装 vue-cli

查看vue-cli是否成功，不能检查vue-cli,需要检查vue，命令如下：

vue list 

 （2）全局安装webpack和webpack-cli

cnpm install webpack -g //全局安装 webpack
cnpm install webpack-cli -g

4. 使用webpack创建vue项目

vue init webpack app02

如果上面没有全局安装webpack-cli，那么就需要让项目先安装下依赖再运行，安装依赖命令：

cnpm install

创建项目会出现各种配置，可以默认，然后出现两行命令提示

cd app02 #进入vue项目目录
npm run dev #测试vue项目是否成功创建

效果如图：

cd app02     # 进入vue项目目录

npm run build        # 打包vue项目，会将所有东西打包成一个dist文件夹 

好了，两个项目都创建成功了，只需要通过桥梁，连接在一起就行

1、替换Django模板路径
　　

2、配置静态文件路径

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'app02/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
这样就可以实现前后端分离了，哈哈哈。。。