VScode上的Vue+Django（Python）

最新推荐文章于 2025-05-09 23:54:54 发布

一位搞嵌入式的 genius

最新推荐文章于 2025-05-09 23:54:54 发布

阅读量709

点赞数 27

分类专栏：前后端项目开发文章标签： python vscode vue.js django 前端后端

本文链接：https://blog.csdn.net/m0_73589512/article/details/147805936

版权

前后端项目开发专栏收录该内容

2 篇文章

订阅专栏

准备开发环境（后端）

1.Vscode上的Python环境搭建

首先你得知道自己电脑上有哪些Python安装路径

打开管理员权限终端，输入where Python

结果如下：
在官网上下载你所需要的对应版本

然后将下载下来的.exe文件放置在一个纯英文路径下（最好）。

然后双击可执行文件.exe。

最后安装成功！！！
如果想要在VScode中使用特定版本的python
1. 首先需要再VScode中安装Python插件：
2. 先单独创建一个工作区，然后在VScode中打开该文件夹
3. 接着就在这个工作区，选择Python解释器
  
  按下Ctrl+Shift+P调出命令面板，输入并选择 “Python: Select Interpreter”。在列出的所有 Python 版本中，选择 Python 3.9.9 对应的解释器。此时 VSCode 会自动将该 Python 版本应用于当前工作区。
4. 创建虚拟环境：
  1. 使用命令
```
python -m venv vsvenv
```
    如果像我这样：
    
    你需要找到对应的Python3.0以上的版本进行（只有3.0以后才有venv）将Python替换成对应的具体路径
    
    如下：
5. 接着如上图所示：
  
  第一条命令：用于切换到虚拟环境目录下
  
  第二条命令：用于激活虚拟环境
  
  第三条命令：推出虚拟环境
6. 在经过虚拟环境配置后，将虚拟环境与VScode中的项目文件夹进行关联
  
  在 VS Code 中关联创建.env 文件：在代码文件夹的根目录创建一个名为 .env 的文件，在其中添加 python.venv = 虚拟环境路径，比如 python.venv = E:\py_project\Security_System\Security_System_workplace\vsvenv 。设置自动激活：保存 .env 文件后，关闭并重新打开 VS Code，它将自动激活该虚拟环境，之后在 VS Code 集成终端中执行代码相关操作，就会基于此虚拟环境。
  
  如图所示：在终端中运行
```
 .\vsvenv\Scripts\Activate.ps1  
```
  切换进入虚拟环境。

创建Django项目架构：

在项目工作区的根目录下，运行命令：
```
 pip install django
```
如图所示：
接着执行以下命令创建初步项目架构：
```
django-admin startproject Security_System_project  
```
如图所示：
然后切换到项目文件夹路径下：

运行以下代码：
```
python manage.py runserver  
```
如图所示：

可以在http://127.0.0.1:8000/网址查看构建项目的前端渲染页面

图片中的红字警告：是一个重要的提示信息。Django 使用迁移（migrations）来管理数据库模式的变化。当你创建或修改模型时，Django 会生成迁移文件来记录这些更改。这里提示有 18 个未应用的迁移，涉及到admin、auth、contenttypes、sessions这几个内置应用。如果不应用这些迁移，项目可能无法正常工作，因为数据库模式与代码中的模型定义不一致。你需要运行python manage.py migrate命令来将这些迁移应用到数据库中。

运行后:

注意：

如果你只是要“能看到前端页面”，用 Django 就够了；但如果你想“构建一个响应式、交互复杂、组件化的现代前端”，那就用 Vue 3 来搭配 Django 做前后端分离。

前后端分离开发架构：

1.前后端分离开发架构图

2.搭建前端项目架构

在前面的基础上使用命令：
```
cd ..
```
返回上一级目录，也就是我们的工作区位置
首先查看自己电脑上是否安装Node.js

使用命令：
```
node -v
```
如下图所示：

如果没有安装就自行安装(可从 Node.js 官网下载并安装。）后接着以下步骤安装
创建Vue+Vite项目

使用命令：
```
npm init vite@latest Security_System_project_frontend -- --template vue
```
接着新建一个终端：

在该终端中切换至上一步中新建的前端项目工程文件夹中。

使用命令：
```
npm install
npm run dev
```
运行结果：

3.安装本项目前端所需要的包

使用命令：

 npm install bootstrap@5     #Bootstrap 5 是一个流行的 CSS 框架，提供响应式网格系统和常用 UI 组件。
 npm install element-plus    #ElementPlus 是专为 Vue 3 打造的高质量组件库。
 npm install vue-konva       #vue-konva 用于在 Vue 项目中实现声明式的 Canvas 交互与动画。
 npm install pinia           #Pinia 是轻量、类型安全的全局状态管理库。
 npm install axios           #Axios 是一个通用的 HTTP 客户端，可用于浏览器和 Node.js 环境。