Django-Vue搭建个人博客(1)：搭建开发环境

1. 开发环境

本教程的前端开发环境为：

Vue 3.2.47
Vite 4.1.4
npm 9.5.1

本教程的后端开发环境为：

Win 11（64位）
Python 3.10.6
Django 4.1.7
Django REST framework 3.14.0

2. 前端开发准备

开发前端时会用到 npm （类似Python的包管理工具pip），这是 Node.js 官方提供的包管理工具，而 Node.js 可以使用 nvm 来进行安装和管理，所以准备工作的第一步，安装 nvm，下载地址在官网，安装时基本就是一路 next。

完毕后打开命令行（依旧默认是 PowerShell），输入：

> nvm -v
1.1.10

> nvm install 19.8.1
Downloading node.js version 19.8.1 (64-bit)...
Extracting node and npm...
Complete
npm v9.5.1 installed successfully.


Installation complete. If you want to use this version, type

nvm use 19.8.1

> nvm use 19.8.1
Now using node v19.8.1 (64-bit)

> nvm list
  * 19.8.1 (Currently using 64-bit executable)
  
> node -v
19.8.1

> npm -v
9.5.1

显示版号就表示安装成功了。

npm 站点在国外，如果你遇到安装速度慢的问题，可以用指令 npm config set registry https://registry.npm.taobao.org 修改为国内镜像源。

在命令行中允许一下命令：

> npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

该指令会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具，你将看到一些诸如TypeScript和测试支持之类的可选功能提示：

✔ Project name: … frontend
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...

Done. Now run:

  cd frontend
  npm install
  npm run dev

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd frontend
> npm install # 耐心等待包安装完毕
> npm run dev
# 输出：
> frontend@0.0.0 dev
> vite


  VITE v4.2.1  ready in 283 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

打开 Chrome 浏览器，输入http://localhost:5173/ ，即可看到 Vue 的欢迎页面了，前端项目已经正常运行了。

Vue欢迎页面

3. 后端开发准备

python的安装比较简单，首先找到Python官方网站，选择 python 3.10.6 的 windows 版本，下载并安装。

安装时注意勾选python到环境变量，如果没有找到，请安装完毕后自行添加python的环境变量。

安装完成后打开命令行，输入python -V，打印出正确的版本号则说明安装成功了：

> python -V
Python 3.10.6

python 的虚拟环境是 python 多版本管理工具，可以使每个项目环境与其他项目隔离起来，解决包冲突的问题。

python3.3 版本开始就自带了虚拟环境安装指令，配置一下就可以用了。

在CMD命令行中运行下面指令（poweshell上可能修改执行策略才能运行成功）：

D:\> mkdir my_blog && cd my_blog
D:\my_blog>
D:\my_blog> python -m venv venv
D:\my_blog> venv\Scripts\activate
(venv) D:\my_blog>

盘符前有(venv)标识说明进入venv成功。

若上述方法不成功，则可以通过 virtualenv 库创建虚拟环境。

在虚拟环境下，输入命令：

# 安装Django
(venv) D:\my_blog> pip install django==4.1.7
# 新建项目
(venv) D:\my_blog> django-admin startproject backend
(venv) D:\my_blog> cd backend
(venv) D:\WebProject\my_blog\backend>
# 启动服务
(venv) D:\WebProject\my_blog\backend> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
...
Django version 4.1.7, using settings 'backend.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

系统打印出这些信息，说明服务器启动成功了。

查看my_blog文件，发现多了backend文件夹，其结构应该为：

backend
│  manage.py
│  db.sqlite3
└─backend
	|  __init__.py
	|  asgi.py
    │  settings.py
    │  urls.py
    └─ wsgi.py

打开 Chrome 浏览器，输入http://127.0.0.1:8000/ ，即可看到 Django 的欢迎页面了，项目已经正常运行了。

Django欢迎页面

4. 工具推荐

代码编辑器 - 推荐使用 VS Code
浏览器 - 推荐 Chrome

本文标题： Django-Vue搭建个人博客：前言
原文链接： https://www.dusaiphoto.com/article/104/
原文作者： 杜赛
许可协议： 署名-非商业性使用 4.0 国际许可协议
本文对原始作品作了修改，转载请保留原文链接及作者