改造
我们从home_css下的index.html中把我所需要的东西拿到public下的index.html和src/views/Home.vue中(一般的资源引入可以放到index.html中具体dom/bom放到Home.vue中)
1首先是css和js部分，原来的在home_css/index.html中是这样的：
拿到public/index.html中过来是这样的：前面加了/static/home/css
2然后是dom部分：原来home_css/index.html中是这样的：
(太长了我给折叠了)
然后去Home.vue中，把之前的旧的默认的东西删干净成这样：
再把东西粘贴过来：
然后展开检查下，dom层里是否有路径之类的：结果发现了不少图片链接：
把这些链接前面全部加上/static/home_css/ 变成如下这种：
3最后再把bom层内容也就是js等弄过来，原来的home_css/index.html内是这样的：
看上图，这里有俩个引入和一个自动运行的函数。
这里就是本节课比较难的地方了。
我们先看第一个引入，是引入jquery.min.js，这个是因为第三方组件一般都会自带一个jquery，我们不需要使用它的，我们自己上一节课已经安装过了。只需要在Home.vue中写成这样就可以了：
再来看第二个引入和第三个，很显然，第二个引入后，第三个自动运行的就是第二个引入的那个函数。不过正常来说，在vue中有规定的一套调用和定义方法。所以一般来说，直接下载的根本用不了....无论是其中的jq定位还是什么，大概率是不行的。
因为.vue文件的实际dom并不是直接放到html中的，而是当做组件被vue给编译后塞进去#app的。所以这里需要较高的理解第三方插件的能力，来从中找到有用部分，直接写到Home.vue的script里。
这里探查的过程其实只要jq/js/css/html学得好，马上就能看懂。所以我这里就省略了，直接公布答案：
我要的俩个函数分别是，打开这个信封和关闭信封函数：
所以步骤为：
1.在Home.vue中创建俩个函数
注意，函数必须全部放进mehtods里：openMenu用来打开信封，closeMenu用来合起信封
2.解析实现
然后去阅读引入的home_css/js/menu.js 的源码，把其中可以实现我要的俩个功能的代码拿出来，粘贴回openMenu和closeMenu中：
虽然源码很长很多，但是其中只有这么短是我们要的。小伙伴可以直接抄这俩个函数即可，不用去研究源码了。（实际就是给div改了改class样式而已）
3.关联到具体的按钮上
按钮是可以在原来的home_css/index.html中定位找到的，分别是
然后给这俩个按钮加上vue特有的点击指令@click 并指向我们刚刚创建好的俩个函数：
4.然后在终端启动前端调试服务，进行最终测试：
在v_love目录下执行：npm run serve
等它启动成功，我们就可以直接打开浏览器输入网址进行测试了。完全不需要django后端项目哦~这就是前后端分离的好处之一。
前端vue项目本地调试网址为：http://localhost:8080/
上图中，我们确定了页面展示没问题。
然后要测试具体打开和关闭功能：
功能大体也没问题，最后要打开console面板看看有无js报错：
发现也没有任何报错后，那么证明我们引用成功了！
下节课预告，魔改这个首页为我们要的相亲匹配平台的需求效果哦~
