构建django+vue项目

构建django+vue项目

安装好django和vue-cli，我使用的版本是django3.0 / vue-cli 4.2.3

创建django项目

命令行创建：django-admin startproject project

创建vue项目

vue-cli4 可以使用可视化管理界面创建项目，命令行输入vue ui进入可视化管理界面
在django项目的根目录下创建vue项目

将vue项目打包

同样使用可视化管理界面打包，打包前先修改一些配置

修改项目配置下的Vue CLI：
公共资源路径为空，这样项目打包使用的就是相对路径，否则默认的是绝对路径；
资源目录填static，打包后会在输出目录生成一个static文件夹，存放vue项目的静态资源
其他配置不需要修改，保存后可以进行打包。

在任务下的build里点击运行，运行完毕即打包完成。

修改django配置

修改setings.py文件

添加模板文件，如下图

添加静态文件目录，如下图，直接在settings.py文件末尾追加

修改urls.py文件
添加路由，如下图

目录结构

在命令行运行django项目

命令行进入django项目根目录
python manage.py runserver 127.0.0.1:8000
打开浏览器输入网址django项目的网址检验是否成功
此时发现网页已经是vue的页面了，到这里django+vue项目就构建完成了。