django项目与vue项目结合使用详解
1. 安装node.jsnode.js官网:https://nodejs.org/zh-cn/cmd终端输入node -v和npm -v检测是否安装成功2. 使用淘宝npm镜像大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。npm install -g cnpm --registry=https://registry.npm.taobao.org3. 项目初始化
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
这样就可以实现前后端分离了,哈哈哈。。。
更多推荐
所有评论(0)