搭建开发环境

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

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

npm install -g @vue/cli

如果出现以下错误，则表示没有安装 NodeJS， 安装即可。 全局安装好 vue cli 后，使用下面的命令初始化一个简单模板，中途会询问一些选项，全部默认回车就好

vue create vue-demo

初始化完成后项目结构如下，使用编辑器打开项目，推荐 vscode。 继续在 cmd 命令提示符中输入以下命令：

cd vue-demo
npm run serve

开发组件

<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，复制以下代码

在 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>