从零开始摸索VUE，配合Golang搭建导航网站（三.做一个简单的单页面）

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

模仿的目标导航网站

目标网站：馨客栈

先分析一下布局，是一个单页面的网页，没有什么的特殊的交互特效，只有一个左侧的快速导航的菜单，右侧显示菜单里面网站的列表。再加上一些悬浮特效，一点固定的网址跳转，最后我是想通过一个接口进行渲染这些内容。 第一部分先完成左上角固定的跳转布局和图片
第二部分完成左边的主要菜单
第三部分右侧详细菜单列表

页面编写

直接编辑App.vue文件，先暂时不用其他的组件，把那个helloword组件给删掉，等功能复杂了再写一些可以复用的组件，下篇再进行处理细节。

代码，效果展示

基本结构已经确认完成，我们开始从大到小进行html的编写 贴上App.vue代码：

<template>
  <div id="root"> <!-- 根节点必须有，不然报错 -->
    <div id="part_left"> <!-- 左边导航栏 -->
      <div id="ico"> <!-- 网站图标 -->
        <img alt="Vue logo" src="./assets/logo.png" />
      </div>
      <div id="jump"> <!-- 跳转的网站 -->
        <ul>
          <li v-for="item in jump_items" :key="item.name">  <!-- v:for把数据进行循环渲染 -->
            <a :href="item.url">{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <div id="only_menu">  <!-- 坐侧大菜单按钮，用于右侧菜单滑动到指定位置 -->
        <ul id="menu_list">  
          <li v-for="item in url_list" :key="item.name">
            <div>{{ item.menu }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div id="part_right">  <!-- 右侧网站导航栏 -->
      <ul id="url_list">
        <li v-for="item in url_list" :key="item.name">  <!-- v:for嵌套循环，循环里面就不能用id定位元素了，要用class -->
          <div class="one_part">
            <div class='menu_target'>{{ item.menu }}</div>
            <div class="url_list_data">
            <li v-for="url_data in item.url_list" :key="url_data.name">
              <a :href="url_data.url">{{ url_data.name }}</a>
            </li>
          </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {    //渲染数据后期采用api动态请求的方式
    return {
      // 假的数据列表
      jump_items: [
        { name: "情报处1", url: "http://www.baidu.com" },
        { name: "情报处2", url: "http://www.baidu.com" },
        { name: "情报处3", url: "http://www.baidu.com" },
        { name: "情报处4", url: "http://www.baidu.com" },
        { name: "情报处5", url: "http://www.baidu.com" },
        { name: "情报处6", url: "http://www.baidu.com" },
      ],
      //这里后期通过一些
      url_list: [
        {
          menu: "社区",
          url_list: [
            { name: "掘金", url: "https://juejin.cn/" },
            { name: "掘金", url: "https://juejin.cn/" },
            { name: "掘金", url: "https://juejin.cn/" },
            { name: "掘金", url: "https://juejin.cn/" },
          ],
        },
        {
          menu: "前端",
          url_list: [
            { name: "W3C", url: "https://www.w3school.com.cn/" },
            { name: "Nodejs", url: "http://nodejs.cn/" },
          ],
        },
        {
          menu: "后端",
          url_list: [
            { name: "Golang", url: "https://golang.org/" },
            { name: "Python", url: "https://www.python.org/" },
            { name: "PHP", url: "https://www.php.net/" },
          ],
        },
        {
          menu: "运维",
          url_list: [
            { name: "Docker", url: "https://www.docker.com/" },
            { name: "K8s", url: "https://www.kubernetes.org.cn/" },
            { name: "GitLab", url: "https://about.gitlab.com/" },
          ],
        },
      ],
    };
  },
};
</script>

<style>

/*元素样式，这个我最不在行，先做一个简单的出来，后面慢慢打磨*/

#part_left {
  float:left;
  width: 15%;
  top: 50px; /* 距离上面50像素 */
  left: 50px;
  bottom: 0px;
  background-color: #e4e8ec;
}

#part_right {
  float:left;
  width: 68%;
  top: 50px; /* 距离上面50像素 */
  right: 50px;
  background-color: #e4e8ec;
}
#ico{
text-align:center
}

.menu_target{
     display: inline-block;
}
.url_list li{
    width:80px; 
   display: inline-block;
} 
.url_list_data li{
  width:80px; 
  display: inline-block;
}
#only_menu ul li{
  text-align:center;
  width:60px; 
  display: inline-block;
}
#jump ul li {
  text-align:center;
  width:80px; 
  display: inline-block;
  }

#url_list{
  position:absolute;
  width:100%;
}

</style>

效果如图：

总结

CSS写的很粗糙，都忘得差不多了，只实现了一个基本类似的框架，后面再继续打磨。html和JavaScript可以直接介绍很准备知道其中意思，CSS要记住的东西太多了。脑袋还要构想各种元素之间的关系，下篇计划上传到自己的GitLab简单部署一下项目吧