Django-Vue搭建个人博客：前端开发准备

12502 views, 2021/03/19 updated Go to Comments

博客后端的主要开发工作就告一段落了。

覆盖的知识点主要有：

REST 的概念
序列化器/APIView
类视图和通用视图
权限控制
ModelSerializer
超链接字段/分页
视图集/ModelViewSet
SearchFilter/DjangoFilterBackend
嵌套序列化器/操作外键
验证器/覆写动作
自定义字段
文件上传
添加保存数据
模型自关联
JWT 身份验证
权限分配/自定义动作

后面的章节将正式进入 Vue 前端的搭建。核心知识点有：

用 Vue 搭建前端页面
实现 Vue 和 Django 的配合
继续完善 Django 后端功能

在前端开发中，笔者将用到的环境如下：

Vue 3
Vue-Cli 4.5.9
npm 6.14.9

注意事项1：笔者写教程时正处于 Vue2 和 Vue3 的过渡时期，Vue 3 从文档到生态都还不完善（现已推出了中文文档）。但是秉着学新不用旧的精神，教程会采用 Vue 3。读者在看教程时一定要注意相关框架的版本，以免出现接口变动、大版本不一致等原因造成的代码失效的情况。

注意事项2：本教程的笔者需要具有一定前端基础（最起码了解 HTML、Javascript、CSS语法）。如果你前端零基础，那么建议先浏览以下内容：

再次建议读者将示例代码克隆到本地，作为学习过程的参照（也感谢你顺手给一个 Star）。

话不多少，本章的核心任务是让前端服务顺利启动起来。

准备工作

开发前端时会用到 npm（类似 Python 的包管理工具 Pip），这是 Node.js 官方提供的包管理工具。

所以准备工作的第一步，安装 Node.js，下载地址在官网，安装时基本就是一路 next。

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

> npm -v
6.14.9

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

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

接下来就可以安装 Vue 的命令行工具，它可以帮助我们方便的搭建 Vue 项目的骨架：

> npm install -g @vue/cli

# 这里省略一段神秘的安装文字...

> vue --version
@vue/cli 4.5.9

同样的，显示版本号就表示安装成功了。

深入了解见Vue-Cli文档。

如果运行命令报错"vue: 无法加载文件 C:\xxx\vue.ps1，因为在此系统上禁止运行脚本"，则需要通过 PowerShell 解除 Execution_Policies 运行策略限制。方法见这里。

进入 Django 项目的根目录，用命令行工具搭建 Vue 骨架：

# 改为你的项目根路径
> cd D:\Developer\Py\drf_vue_blog
> vue create frontend

一定要选择安装 Vue 3：

前面说了，Vue 3 和 Vue 2 变化比较大，装错了后面章节的代码可能都跑不起来。

# 选择第二项，即安装 Vue3

Vue CLI v4.5.9
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

然后等待安装完成：

Vue CLI v4.5.9
Creating project in D:\Developer\Py\drf_vue_blog\frontend.
Installing CLI plugins. This might take a while...

...

added 1243 packages from 946 contributors in 22.141s

63 packages are looking for funding
  run `npm fund` for details

Invoking generators...
Installing additional dependencies...

added 75 packages from 83 contributors in 9.281s

69 packages are looking for funding
  run `npm fund` for details

Running completion hooks...

Generating README.md...

Successfully created project frontend.
Get started with the following commands:

 $ cd frontend
 $ npm run serve

出现这段文字说明 Vue 安装完成了。

与 Django 需要运行服务器类似，作为前后端分离的项目，在开发时前端同样也需要运行前端的服务器。

根据文字提示，进入 frontend 目录，运行 Vue 的开发服务器：

> cd frontend
> npm run serve

 DONE  Compiled successfully in 2134ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.20.10.2:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.