Vue和Django前后端分离的简单记录

Vue的项目创建与打包

首先进行环境配置

全局安装好 node/ vue /vue-cli /webpack (能百度到很多方法和资源)

可以通过类似 node -v验证是否成功安装

在项目文件夹创建项目

通过在CMD命令行输入

vue init webpack 项目名      //项目名要小写

创建vue项目

如果使用命令后等待时间过长，出现timeout错误

 vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443

那你需要离线初始化，在此之前从github上下载模板 下载地址

将压缩包解压到C盘用户目录下的 .vue-templates文件夹 (没有就自己新建一个)

将文件夹改名为webpack

然后可以使用命令离线初始化了

D:\Vue_works>vue init webpack demo --offline   #这里是命令
> Use cached template at ~\.vue-templates\webpack

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���   #乱码不要在意
���������ļ���
? Project name demo                                 #完成以下选项
? Project description A Vue.js project
? Author gongsunjie
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "demo".

tip:不要使用vue create 创建项目，这样的项目打包成静态文件放到Django会有错误，
不过在其他的服务器容器可以正常使用

Django项目创建

Django安装并配置完成后

在项目文件夹输入

django-admin startproject 项目名

Vue部署在Django

进入vue的项目文件夹
使用命令

npm install
npm run build

打包项目，打包完成会生成一个dist文件夹

将dist文件夹放在Django项目同级目录下
修改Django项目配置
修改urls.py

from django.conf.urls import url
from django.contrib import admin

from django.views.generic.base import TemplateView 

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', TemplateView.as_view(template_name="index.html")),
]

修改settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['./dist'],    #修改部分
        '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',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'./dist/static/'), # 添加内容
]

之后打开Django服务测试一下

D:\Django_works\TestCMD>python manage.py runserver  #打开服务
Performing system checks...

System check identified no issues (0 silenced).

You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.
June 19, 2020 - 14:44:20
Django version 1.9.13, using settings 'TestCMD.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

在浏览器输入地址

相关链接

Vue2全家桶之一：vue-cli（vue脚手架）超详细教程
https://www.jianshu.com/p/32beaca25c0d

vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法
https://blog.csdn.net/feinifi/article/details/104578546

python+django+vue搭建前后端分离项目
https://www.cnblogs.com/zhixi/p/9996832.html

python框架django中结合vue进行前后端分离
https://www.cnblogs.com/ranyihang/p/10694635.html