本节开始之前，先给新手们用大白话讲一下前后端的大体流程，有个基本概念：

    这种web平台，都是需要后端和前端一起协作的，后端主要负责数据库和各种逻辑处理，前端负责页面展示和用户交互还有数据接收。他们之间就靠http协议接口链接。

    我们上节课做的django只是后端的服务，并没有前端，所以接下来就是做前端项目，这个前端项目用vue来做。做完之后再和后端django链接起来就有雏形了。

    那么这个vue你要怎么下载和使用呢？

    （在知识星球或者培训基地，都有详细的教程，这里我给大家截图出来给粉丝们也看看）

    我大白话讲一下：

1. vue直接用需要很高的专业性，所以有人打包做了一个脚手架：vuecli

2. vuecli很受欢迎，所以一直在更新，但命名有很大变化，3代之前叫vue-cli ，3代之后教@vue/cli，而现在已经出到5.x了。

3. 有人问了，那这个vuecli更新不更新的，就是一个脚手架，和内部真正的核心vue有什么影响么？当然有，vuecli4.5以下自带的是vue2，以上自带的是vue2和vue3。所以我们要用vue3，那就直接无脑安装vuecli最高版即可。

4. vuecli还有后续vue的相关命令，比如启动前端服务啊，比如安装什么前端样式组件啊，都是要通过npm命令来实现的，而这个npm是node的管理工具，所以你得先确保电脑有node才行。

5. node的版本一直是个大坑，很多时候你都会发现版本过低或过高。所以你得先确认node的版本（命令：node -v 终端或cmd里敲）来看看版本，最低也的是8以上，当然也不是越高越好。

---

常用命令：

查看你的node版本：node -v查看npm已经安装的：npm ls -g安装：npm install -g .... 卸载：npm uninstall .... -g查看vuecli版本：vue -V 

---

然后开始正式安装：

那安装的位置呢？很多小伙伴会说，既然是前后端分离的，中间又用http链接，那么位置放在哪都可以吧，甚至不是在这个电脑都可以。

这话是没错，正规公司也确实是如此：

后端开发自己电脑做的后端代码项目，上传到测试服务器部署。前端开发也在自己电脑做好前端项目，然后打包后上传到另一个测试服务器部署。互相再通过一些中间件来自动配置好接口等信息。然后测试人员就可以去通过网址进行测试了。

而我们现在的问题是，我们做测试平台，尤其是这种小规模的，开发者就你自己一个人，你还要搞好几台电脑或服务器么？一台能做的事就一台做吧。而且这里面还涉及到路径寻址，配置这些复杂的问题。

我这个是面向新手的教程，一来是这些复杂的配置会占用大量篇幅和读者经历，甚至很多新手直接就倒在了这一步无法继续下去。

而教程也不能东一句，西一句的，一会这个电脑，一会那个地址的去讲，很容易造成学员思维混乱，无法学习。

所以我其实是做了几年的讲师之后，内容是偏向于尽量教会新手，而不是绕晕新手，大家主要来学习这个平台的精髓，而非通用的运维知识。

所以，安装位置我一直都是定在这个django的根目录下的，主打个方便，一个文件夹能搞定前后端。包括后续打完包的寻址等等问题都变的简单多了。

那么接下来，打开pycharm的console面板，先确认自己在django根目录：

然后执行命令：vue create v_project (vue开头命令就是vuecli给你赋予的)

然后回车，你会看到一些选项，跟着我选即可。

如果中间选错了的话，可以直接多按几次ctrl+c或command+c 强制退出这次创建，再重新输入vue create v_project命令创建新的。

1. 选最后一个Manually ...，这个是自定义设置。前面的都是我以前配置好的预设，咱不选。

2. 按如下选择，空格键选中。然后回车。

3. 选vue版本，3.x 回车

4. 输入n 后回车。意思是不启用history记忆路由

5. 选第一个，回车

6. 选第一个，回车（意思是编码规范提示）

7. 选第一个回车，意思是保存时候帮你检查一下代码错误

8. 选第二个，package.json，意思是配置写到这个文件里。

9. 输入n回车，问你是否保存这次配置。以后再创建就回来看这篇文章就行，所以收藏保存吧~

然后就开始创建了过程可能几秒到几分钟

创建好了就变成了这样：

展开这个新出现的v_project文件看一下里面大体结构：

我们之后会经常使用的就是这个src文件夹，那些页面也都是写在里面的。

展开这个src文件夹，我们之后常用的就是这个components和views文件夹，前者存放小组件，后者存放大页面。

然后最后一步，我们在控制台，通过cd命令进入这个v_project

然后执行 npm run serve命令

等几秒后，出现下图，就算启动成功：

然后点击这俩个蓝字网址其一，进入看看效果：

看到这个页面就代表前端部署成功了

本节到此结束

下节预告：和django后台的打通