总览
一、安装 Django
pip install django==3.2
二、安装 MySQL 驱动程序
pip install pymysql
三、安装 DRF
pip install djangorestframework -i https://pypi.douban.com/simple
四、安装 Vue
（一）脚本化引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
（二）单文件引入（vue-cli / vite）
环境搭建
（1）安装 Node.js 版本10.0以上（偶数+LTS版本）的开发环境
# 安装地址
https://nodejs.org/
检查是否安装成功
查看版本
node -v
（2）安装 nvm（用于管理多个 node.js 版本）
# Linux 安装地址
https://github.com/nvm-sh/nvm
# 参考网址
https://www.jianshu.com/p/622ad36ee020
# windows 安装地址
https://www.jianshu.com/p/622ad36ee020
windows 安装部分截图
安装完成以后,查看环境变量是否设置完成
检查是否安装成功
nvm 常用命令
使用 nvm install <版本号> 安装两个版本的 node.js 作为使用
Linux 系统下
windows 系统下
（3）注意事项
如果使用nvm工具，则直接可以不用自己手动下载nodejs，如果使用nvm下载安装nodejs的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)。
在window系统下如果安装node的时候比较慢，则可以修改一下配置文件：
# 配置文件名：settings.txt
root: C:\tool\nvm [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
（4）查看是否安装 npm
在安装node.js完成后，在node.js中会同时安装一个包管理器npm。可以借助npm命令来安装node.js的包。这个工具相当于python的pip包管理器。
npm 常用命令
注意事项：
npm虽然是nodejs官方提供的包管理工具，但事实上并不好用，所以有第三方开发者提供了更好用的yarn包管理器。
（5）安装 yarn 包管理器
ubuntu20.04下安装yarn
# 安装yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install -y yarn
# sudo apt remove yarn # 卸载yarn
# sudo apt autoremove # 卸载yarn相关其他依赖
windows下安装yarn
# 通过npm安装yarn包管理器。
npm install -g yarn
# 查看yarn版本
yarn --version # 简写： yarn -v
yarn 常用命令
# 注意事项
package.json类似python的requirments.txt。
yarn默认的包管理服务器在国外，所以第一次使用yarn安装模块时会出现提示是否切换到淘宝镜像站，填写y即可。
输入命令初始化 yarn
（6）安装 Vue-cli
可以使用 npm 或 yarn 安装 vue-cli 项目构建工具
npm install -g @vue/cli
# yarn global add @vue/cli # 注意，安装不成功就换成npm
# 安装完成以后，可以通过以下命令查看vue/cli的版本
vue -V
# 5.0.8
如果安装速度过慢，一直超时，可以考虑切换国内npm镜像源：http://npm.taobao.org/
（7）安装 Vite
cd ~/Desktop
npm create vite@latest
# yarn create vite
项目根目录结构
vue 项目执行流程图
五、安装axios插件
在客户端项目根目录下打开终端，使用npm或者yarn安装axios包
npm install axios
yarn add axios
六、安装vue-router插件
在客户端项目的根目录下，package.json的同级目录
npm install vue-router@next
yarn add vue-router@next # 安装最新版本
七、Vue 操作指令
# vite的打包命令
yarn build
# 模拟服务器
npm install -g live-server
cd ~/Desktop/myproject/dist # 例如：www/dist就是打包后的vue项目根目录
# 再在终端执行
live-server