django+vue构建前后端分离

你需要安装有vue。并且安装vue-cli。

首先安装node.js，官网地址：https://nodejs.org/zh-cn/download/
下载安装包，直接安装

#查看版本
appledeMac-mini-3:Blog apple$ node   -v
v12.16.1
appledeMac-mini-3:Blog apple$ npm  -v
6.13.4

下载vue-cli

appledeMac-mini-3:Blog apple$ npm install -g vue-cli

使用代理或国内镜像

appledeMac-mini-3:Blog apple$ npm config set proxy  *****

在django项目中创建vue项目

sudo vue init webpack fronted(和djgano中app是同级的，相对于之前的模版层换成了fronted)

下载慢的话就去掉代理用淘宝的npm镜像

npm config delete proxy
npm config delete https-proxy

安装cnpm

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

进入创建的vue项目
cd fronted/
#安装依赖
cnpm install

cnpm run dev运行调式的服务，会启动一个web服务，访问localhost:8080 即可调式

将vue项目打包

sudo cnpm  run   build

会打包在vue项目下的/dict/中

将vue集成到django中
配置setting
1.

2.

STATIC_URL = '/static/'
#添加这行
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "fronted/dist"),
]

配置urls

启动django
访问页面时，静态文件static加载不出来
1.确定加载的fronted/index.html
2.发现index和static是同级的

将/static改为./static

还是加载不出来

看官方文档呗：

修改STATICFILES_DIRS

重新启动