最近接到一个任务,就是用django后端,前段用vue,作一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,以前压根没接触过vue。看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧!前端
首先是建立一个django项目vue
django-admin startproject mysite # 建立mysite项目 django-admin startapp blog # 建立blog应用 1、接下来就是安装关于vue 的东西了node
一、首先安装node.js,官网地址:https://nodejs.org/zh-cn/download/python
二、使用npm淘宝镜像,避免npm下载速度过慢的问题 npm install -g cnpm --registry=https://registry.npm.taobao.orgwebpack
三、使用cnpm 下载vue-cli cnmp install -g @cue/cliweb
2、在django项目中建立vue项目vue-cli
首先,进去django项目的项目目录中,执行:npm
vue init webpack firstvue## firstvue为前端项目的名称,可自定义。建立的项目会跟django中的app同样的目录登记。相似一个前端app同样。django
mysite 文件夹 blog 文件夹 和 firstvue文件夹 要在同一目录级别后端
在建立时,会弹出不少选择项,根据本身需求自定义修改。也能够所有回车,使用默认的。这里我就直接所有回车。
3、编写vue前端项目,直接编写就是,调试则能够执行。也可先不编写,跳过这一步
cd firstvue## 进入到上一部建立的firstvue项目中 cnpm install ## 安装须要的依赖模块 cnpm run dev ## 运行调式的服务,会启动一个web服务,访问localhost:8080 便可调式 4、vue项目写完后,打包vue项目,而后修改django配置,将vue集成到django中
cnpm run build ## 打包vue项目,会将全部东西打包成一个dist文件夹
5、接下来就是配置django中的setting文件了:
6、修改django的主目录的urls文件:
7、启动django服务,访问localhost:8000 则能够出现vue的首页。
python manage.py runserver