【本节目的】完成首页(工具列表)-前端
【所需技术】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 呢？
