搭建开发环境
搭建一个 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>
效果图