【本节目的】完成首页(工具列表)-前端
【所需技术】vue-cli elementUI
打开我们的项目，观察现在的文件结构：
我们现在要做一个首页的前端部分，这个页面的内容主要是我们的工具列表，可以方便进入的用户直接选中工具来进入工具详情页。
而前端页面要写在哪里呢？答案就是 v_project / src /views 下。
文件格式后缀为 .vue
为什么不是.html ？这是因为在vue-cli前端中，所有的html模板都要以.vue结尾，因为这样的后缀就意味着里面是按照vue的语法来写的。
那么有同学就问了，浏览器不是只能解析.html后缀的页面么，.vue的怎么办呢？
答案就是，vue-cli会把.vue后缀的文件，自动翻译成index.html中的一部分代码，最终django就是来给浏览器返回这个index.html而已。
那么这个index.html在哪？
答案就在这：
这里是俩个index.html， public下的是调试时前端自己启用的。而dist下的则是打包给django项目专用的。
打包的过程其实就是把public/index.html 给更新到 dist/index.html 而已。
那么我们接下来说说，在vue-cli前端中，我们写的其实严格来说都不叫页面，都只能叫组件。因为他们都是要被当做一个部分塞到index.html中。
但是即便是组件，也分俩种，一种是页面级，一种是普通级。
从名字就可以看出来，页面级是比较大的，作为一个独立页面存在的。普通组件则是某一小个div ，通常一个页面级组件内会含有多个小普通组件。
而且页面级组件的跳转url设置是在router.js中设置配对。而普通组件则是被在dom层直接引用，在vue中直接导入。
如果这里大家有经验的自然听得懂，没经验的，光听纯理论很可能还是不懂。没关系。
让我们接下来正常开发，几节课之后相信你就会恍然大悟的。 好，让我们回归开发主线，现在去views下新建一个 ToolList.vue ，从名字上看就是工具列表，也会作为我们的首页。
新建时候注意选择 Vue Componet , Component就是组件的意思。
新建完成后：
你会发现，这个页面自动填充了一些内容。根据成对原则，这些内容正好是三部分：
template ：dom层元素
script: vue的bom层函数
style : 页面的样式
我们先测试一下，在这个template中写一个div，并在内部写上一个标题：
然后我们在pycharm或终端中，通过命令运行vue前端项目，注意此时只是运行前端，并没有涉及到django后端服务：
确保在v_project 根目录，执行 npm run serve
等待启动成功显示：
它给了我们俩个网址，其实都是一个，就是打开vue前端的首页。我们在之前测试过，点开后打开的是：
这并不是我们想要的页面，那么怎么来转到我们的 ToolList.vue 呢？
答案就是在router.js中：
注意看，之所以我们打开网址，默认只有/也就是空路由的情况下，打开的是Home默认页面，就在三个红线箭头上。
我们现在改成这样，就可以实现我们要的效果了：
这里的name其实没什么用，就删了。然后改了compontent的值，为上面我们新引入的刚刚写的页面级组件 ToolList.vue 并取名为 ToolList 。
然后ctrl s 保存，看看浏览器的效果：
成功展现了我们自己手写的ToolList.vue 的内容。
这里有同学要问了，上面的那个 超链接是哪来的？
答案是在这里：App.vue
在这个App.vue中可以看到这俩个超链接，所以我们猜测出来一个事实，就是首页展示的其实是这个App.vue的内容，然后App.vue内引入了 router.js里的目标组件，靠的就是那个 <router-view>
简单概况就是， App.vue是母体。
如果我们不想要这个超链接demo。就干脆注释掉即可。
友情提示，选中要注释掉的所有行，按command ? 即可反复注释/生效
然后ctrl s保存，看看浏览器(浏览器不需要刷新，它监控到组件变化，会自动刷新。)
可以发现，顶部的超链接已经不见了。
然后我们这个页面只是在前端本地调试上展现成功了。大家注意到，我们的浏览器url的端口是：8080
显然这并不是django项目的8000端口。
那如果说前后端要合并起来，并在django中启动打开页面的话，要怎么做呢？
通俗来说就是要把前端的东西打包一下。
还是在终端v_project根目录下中执行命令：npm run build 。
友情提示，可以先ctrl c 多按几次来杀掉npm run serve这个启动前端的服务，然后就可以正常执行 npm run build打包命令了。
打包过程较慢，可能几十秒，大家耐心等待。
打包成功后
此时我们去看看dist文件夹：
实际上，这时候我们写的东西都已经翻译并融入到了 dist/index.html中了。
django是可以直接调用返回这个index.html的。所以我们启动django服务：
启动命令是 python3 manage.py runserver 0.0.0.0:8000
或者你直接按pycharm右上角的启动按钮：
启动成功后控制台输出如下：
注意看，此时给的url的端口是 8000 ，前端之前是8080，这里大家注意区分。
打开这个8000的网址：发现如图所示：
这个问题是因为我们的空路由 并没有被指定关联。所以报404。
那么我们这里怎么改一下呢？当然是和前端保持一致。
前端空路由 对应首页。
我们django后台也要在urls.py中用空路由 对应 这个index.html 才行，不然后续可能会引发bug。
注意这里我们之前用/home/来对应index.html了，现在改一下：单用一个空字符串来代表index.html。
保存后，刷新浏览器，注意最好刷新一下，django后台需要手动刷新，不比vue-cli前端方便。
结果如下：
看到127.0.0.1:8000 直接对应并且展示了我们的首页，就算成功~
本节到此结束，欢迎大家追更下一节哦~
