一个vue前端的例子（二）

我们现在要做一个首页的前端部分，这个页面的内容主要是我们的工具列表。前端代码写v_project / src /views 下，文件格式后缀为.vue

为什么不是.html ？这是因为在vue-cli前端中，所有的html模板都要以.vue结尾，因为这样的后缀就意味着里面是按照vue的语法来写。浏览器只能解析.html后缀的页面，.vue-cli会把.vue后缀的文件，自动翻译成index.html中的一部分代码，最终django就是来给浏览器返回这个index.html而已。index.html在哪呢，在v_project/public/index.html

我们在views下新建一个 ToolList.vue，分为三部分template ：dom层元素；script: vue的bom层函数；style : 页面的样式

我们先写个小dome

1)在v_project / src /views/ToolList.vue下写如下内容

<template>
    <div>
        <h1>我是工具列表页面</h1>
    </div>
</template>

<script>
    export default{
        name:"ToolList"
}
</script>
<style scoped>
</style>

2）在v_project / src /router/index.js设置路由

默认根目录/ 对应home页面，我们修改为我们的ToolList页面,注意需要先引入

改为

{
    path: '/',
    component: ToolList
  }

在v_project根目录执行 

npm run serve

启动成功，打开给出的网址

结果如下：

Home|About 哪来的呢？v_project / src /App.vue带的，他是所有页面的母体，我们不想要可以注释掉