搭建开发环境

搭建一个 vue 项目最快的方式就是使用 vue cli 脚手架进行初始化，包含了所有完整的依赖及开发配置。

首先全局安装 vue cli，打开 cmd 命令提示符 或者 power shell，输入以下命令：

npm install -g @vue/cli

如果出现以下错误，则表示没有安装 NodeJS，下载 NodeJS 安装即可。

全局安装好 vue cli 后，使用下面的命令初始化一个简单模板，中途会询问一些选项，全部默认回车就好

vue create vue-demo

初始化完成后项目结构如下，使用编辑器打开项目，推荐 vscode。

继续在 cmd 命令提示符中输入以下命令：

cd vue-demo
npm run serve

在浏览器中打开 http://localhost:8080/ 查看效果图

开发组件

这里我们关注的重点是 /src 文件夹下的内容。
在 src/components 目录下新建文件 PageBanner.vue，复制以下代码

<template>
  <div class="page-banner">
    <img :src="image" alt="" />
  </div>
</template>

<script>
export default {
  name: "PageBanner",
  data() {
    return {
      image: "../assets/banner.png", // 这里替换成自己的图片，可以是外部链接
    };
  },
};
</script>
<style>
.page-banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在 src/components 目录下新建文件 HeaderNavigation.vue，复制以下代码

<template>
  <div class="nav">
    <ul>
      <template v-for="item in items" :key="item">
        <li>
          <a :href="item.url">{{ item.txt }}</a>
          <SecNav v-if="item.children" :items="item.children"></SecNav>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import SecNav from "./SecNav.vue";

export default {
  name: "HeaderNavigation",
  components: { SecNav },
  data() {
    return {
      items: [
        { txt: "主页", url: "/" },
        { txt: "联系我们", url: "/" },
        {
          txt: "服务内容",
          url: "/",
          children: [
            { txt: "火星旅行", url: "/" },
            { txt: "仙女星旅行", url: "/" },
            { txt: "M77旅行", url: "/" },
          ],
        },
        {
          txt: "售前咨询",
          url: "/",
          children: [
            { txt: "旅行路线", url: "/" },
            { txt: "安全保障", url: "/" },
            { txt: "自助查询", url: "/" },
            { txt: "人工客服", url: "/" },
          ],
        },
        { txt: "投诉建议", url: "/" },
      ],
    };
  },
};
</script>

<style>
.nav {
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 1;
}
.nav > ul {
  display: flex;
  list-style: none;
  margin: 0;
  justify-content: space-around;
}
.nav > ul li {
  flex-grow: 1;
  padding: 15px 20px;
  text-align: center;
  position: relative;
}
.nav > ul li:hover {
  background-color: #2289ff;
  cursor: pointer;
}
.nav > ul li:hover > a {
  color: white;
}
.nav > ul li:hover .sec-nav {
  display: inline-block;
  z-index: 2;
}
.nav > ul li a {
  display: inline-block;
  width: 100%;
  color: #2289ff;
  text-decoration: none;
}
</style>

在 src/components 目录下新建文件 SecNav.vue，复制以下代码

<template>
  <ul class="sec-nav">
    <template v-for="item in items" :key="item">
      <li>
        <a :href="item.url">{{ item.txt }}</a>
      </li>
    </template>
  </ul>
</template>

<script>
export default {
  name: "SecNav",
  props: ["items"],
};
</script>

<style>
.sec-nav {
  position: absolute;
  background-color: #fff;
  display: none;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
}
.sec-nav li {
  list-style: none;
}
</style>

修改 src/App.vue ，复制以下代码

<template>
  <HeaderNavigation />
  <PageBanner />
</template>

<script>
import PageBanner from "./components/PageBanner.vue";
import HeaderNavigation from "./components/HeaderNavigation.vue";

export default {
  name: "App",
  components: {
    PageBanner,
    HeaderNavigation,
  },
};
</script>

<style>
body {
  margin: 0;
}
</style>

效果图