VSCode搭建VUE+Django前后端分离环境

最新推荐文章于 2024-10-14 17:59:17 发布

原创最新推荐文章于 2024-10-14 17:59:17 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文详细介绍了如何在VSCode中搭建Vue.js和Django的前后端分离环境。首先，确保安装了Python3环境，接着分步阐述如何搭建Django项目，然后按照vue-cli的步骤创建Vue脚手架。最后，在Django配置中设置STATICFILES_DIRS以链接前端静态文件。

准备：安装好Python3环境

1、//python scripts目录下pip命令安装django：

	pip install django

2、//进入项目要放置的目录，django命令生成项目：

django-admin startproject 项目名称

3、//vscode打开文件夹

4、//vscode 终端命令行启动项目：
（电脑里安装了多个版本python，则检查一下python.py文件中设置的是不是python3解释器）

python3 manage.py runserver 8001

5、//浏览器输入地址访问：

http://localhost:8001

6、//vscode 终端命令行创建app，
（项目名只是一个容器，一个django下可以有很多个应用程序）：

python3 manage.py startapp app名称（如webapp）

在这里插入图片描述

7、//settings里添加新生成的app名称

在这里插入图片描述

8、//配置路由（因为此时views下还没有login方法，所以报错）

在这里插入图片描述

9、//views下新建login方法

在这里插入图片描述

10、//启动项目，浏览器输入地址：http://localhost:8001/login
http://localhost:8001（这个地址不再生效）

在这里插入图片描述

具体参考vue-cli搭建步骤

1、vue-cli脚手架搭建，创建frontend项目（放在HelloWorld下，和webapp同级）

2、运行frontend项目，进入到frontend目录，命令启动项目：npm run dev

3、浏览器输入:http://localhost:8080

1、//HelloWorld>settings.py，添加：

在这里插入图片描述

STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘frontend/dist/static’),
]

2、//HelloWorld>urls.py，添加：

在这里插入图片描述

4、//进入frontend目录，执行命令，生成dist文件：

npm run build

5、//进入HelloWorld目录，执行命令：
（可以和第四步分别在vscode终端输入，系统cmd中输入两个命令）

python3 manage.py runserver 8001

6、//浏览器输入：127.0.0.1:8001/index/，即可看见vue首页