使用vue组件搭建网页应用

使用vue组件搭建网页应用

  • 搭建开发环境
  • 开发组件

搭建开发环境

搭建一个 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>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281348.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重新整理 .net core 实践篇 —linux上排查问题实用工具 [外篇]

前言介绍下面几个工具:Lldbcreatedumpdotnet-dumpdotnet-gcdumpdotnet-symbolProcdump该文的前置篇为:https://www.cnblogs.com/aoximin/p/16839812.html献给初学者&#xff0c;这篇就只介绍下看下日志和lldb&#xff0c;毕竟东西太多了。正文我以官网的例子作为演示&#xff1…

Office 365离线安装

Office 365除了可以在线安装外&#xff0c;还可以进行离线安装&#xff0c;但激活还是需要连接互联网的哟首先下载Office部署工具https://www.microsoft.com/en-us/download/details.aspx?id49117 下载文件后&#xff0c;运行自解压缩可执行文件&#xff0c;其中包含 Office 部…

reduceByKey和groupByKey区别与用法

2019独角兽企业重金招聘Python工程师标准>>> 在Spar看中&#xff0c;我们知道一切的操作都是基于RDD的。在使用中&#xff0c;RDD有一种非常特殊也是非常实用的format——pair RDD&#xff0c;即RDD的每一行是&#xff08;key, value&#xff09;的格式。这种格式很…

软件工程的第一性原理丨SmartIDE

作者&#xff1a;徐磊原文地址&#xff1a;https://smartide.cn/zh/blog/2022-1022-software-engineering/徐磊英捷创软科技&#xff08;北京&#xff09;有限公司创始⼈/⾸席架构师 / CEO / SmartIDE开源项⽬创始⼈。微软最有价值专家MVP&#xff0c;微软区域技术总监&#xf…

排序算法之快速排序详解

一、算法介绍 快速排序&#xff1a;快速排序的基本思想是通过一次排序将等待的记录分成两个独立的部分&#xff0c;其中一部分记录的关键字小于另一部分的关键字。C部分的快速排序一直持续到整个序列被排序。 任取一个元素 (如第一个) 为中心提出所有小于它的元素&#xff0c;并…

openstack 中国联盟公开课參会总结

主流趋势 1. openstack defcore 互操作性认证。打通不同的openstack 厂商之间的连接2. 首批OpenStack管理员认证(COA)将于2016年进行3. 混合云应用广泛 Cloud Broker,cascading openstack 云连接器4. DevOps5. 虚拟桌面6. Storage 方面&#xff0c;Ceph和Glusterfs 7. Network…

Re:从零开始的Vue项目搭建

Re&#xff1a;从零开始的Vue项目搭建初始的终结与结束的开始Nodejs项目的简单测试从零开始webpack开发模式webpack编译打包后记初始的终结与结束的开始 最开始接触vue项目搭建是从vue-cli开始&#xff0c;模板式操作&#xff0c;一键搞定&#xff0c;几乎可以无缝进入代码开发…

C# WPF 用代码画一幅图(*精品*)

概述有时候我们的程序界面中需要显示一些简单的示意图&#xff0c;一般我们有原图的话直接嵌入我们程序就可以&#xff0c;但有时候我们没有原图&#xff0c;这时候我们不妨用代码自己画出来.今天小编要给大家展示的是这样一副图片&#xff1a;接下来&#xff0c;我就用代码纯手…

矿难让显卡压了那么多货咋办?NV如是说

2019独角兽企业重金招聘Python工程师标准>>> 在苏州 GTC 开幕的几天前&#xff0c;英伟达刚刚遭遇了一次股价的腰斩。 近来加密货币的热度渐低&#xff0c;受到挖矿热潮照顾许多的英伟达「矿机」销量受到打击&#xff0c;甚至出现了严重的库存危机&#xff0c;加上近…

花式看超级碗 人工智能、大数据在碗里

“超级碗”可不是一个大碗!!!超级碗(Super Bowl)是美国国家美式足球联盟(也称为国家橄榄球联盟)的年度冠军赛&#xff0c;胜者被称为“世界冠军”。超级碗一般在每年1月最后一个或2月第一个星期天举行&#xff0c;那一天称为超级碗星期天(Super Bowl Sunday)。超级碗是比赛的名…

SimMechanics/Second Generation倒立摆模型建立及初步仿真学习

笔者最近捣鼓Simulink&#xff0c;发现MATLAB的仿真模块真的十分强大&#xff0c;以前只是在命令窗口敲点代码&#xff0c;直到不小心敲入simulink&#xff0c;就一发不可收拾。话说simulink的模块化建模确实方便&#xff0c;只要拖拽框框然后双击设置属性就可以慢慢堆建自己的…

10 行代码提取复杂 Excel 数据

把 Excel 文件导入关系数据库是数据分析业务中经常要做的事情&#xff0c;但许多 Excel 文件的格式并不规整&#xff0c;需要事先将其中的数据结构化后再用 SQL 语句写入数据库。而一般情况下&#xff0c;结构化的工作量会比较大&#xff0c;而且很难通用&#xff0c;每次都要针…

人工智能模型的网络结构可视化

本文主要介绍人工智能模型的网络结构可视化的常见方法。对于使用神经网络模型来说&#xff0c;我们主要关注的是模型的输入和输出。在 ML.NET 中使用 ONNX 模型时&#xff0c;我们就需要了解这些信息&#xff0c;以便在构成神经网络的所有层之间生成连接映射。下图就是昨天 《Y…

整理ASP.NET MVC 5各种错误请求[401,403,404,500]的拦截及自定义页面处理实例

http://2sharings.com/2015/asp-net-mvc-5-custom-404-500-error-hanlde https://blog.csdn.net/yhyhyhy/article/details/51003683 ASP.NET MVC 5的开发中&#xff0c;服务器的各种错误[如&#xff1a;401&#xff08;登录授权验证&#xff09;&#xff0c;403&#xff08;禁止…

编辑器领域正发生变革?从面试看 Visual Studio Code 的崛起

Visual Studio Code&#xff08;VS Code&#xff09;的使用率在迅速上升&#xff0c;现在已经成为大多数工程师的首选编辑器&#xff0c;并似乎正迅速抢占其他顶级编辑的市场份额。Triplebyte 每周都会面试数百名工程师。在每次面试中&#xff0c;我们都会记录面试者使用的编辑…

C#7.0 ref引用传递

1.概要在工作中大家用到引用类型是非常多的&#xff0c;大家都知道引用类型在使用过程中传递的是对象引用并不会发生整个对象复制。而值类型在传递的过程中就不一样了&#xff0c;我曾经在编写代码时希望通过值类型来压低应用程序的内存占用&#xff0c;在高并发的情况大量的对…

android面试详解

前台就是和用户交互的进程 可见进程例如一个activity被一个透明的对话框覆盖&#xff0c;该activity就是可见进程 服务&#xff1a;service进程 后台一个activity按了home按键就是从前台退回到后台 标准模式&#xff1a;不管任务栈是否存在相同的activity都会创建一个新的activ…

element-ui Notification重叠问题,原因及解决办法

在1个方法中调用两次this.$notify方法&#xff0c;会出现通知框重叠的问题 methods: {checkLogin: function () {if (this.username ) {this.$notify({title: 提示,message: 请输入用户名})}if (this.password ) {this.$notify({title: 提示,message: 请输入用户密码})}}}网上…

Visual Stiudio使用技巧

技巧1 自动生成带参构造函数当我们在编写代码时会经常遇到初始化一个的类&#xff0c;需要通过构造函数进行对象初始化。那么这个时候我们可能会需要逐个去手动写&#xff0c;这样的工作即重复又无趣。如果是在项目非常紧急的情况下还有大量的字段需要与入参一一对应起来简直太…

C#性能测试BenchmarkDotnet

1.简介在我们开发高性能代码时&#xff0c;需要各种针对性能优化进行编码。那么如何才能知道我们所加的代码是否有性能方面的正向优化呢&#xff1f;有了BenchmarkDotNet&#xff0c;做性能对比测试就非常容易了&#xff0c;只需要把你的测试方法加上特性[Benchmark], 想做不同…