如何在vue项目中增加网页logo

最新推荐文章于 2024-08-13 14:34:22 发布

IT小村

最新推荐文章于 2024-08-13 14:34:22 发布

阅读量4.9k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/larger5/article/details/105929721

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、前言

vue项目中增加网页，操作很简单，就能达到效果：一张图片 + 一行代码 。

二、正文

本项目是基于 ElementUI 的 element-starter，以做更好的演示。

1.代码

在这里插入图片描述

增加如下logo

在这里插入图片描述

增加了如下的代码

<link rel="icon" href="../img/MyLogo.png">

注意在项目的根目录下，新建一个文件夹如 img，logo 的图片从里边获取，不要在 assets 中获取！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="icon" href="../img/MyLogo.png">
    <title>Lin Hongcun</title>
</head>

<body>
<div id="app"></div>
</body>

</html>

2.效果

在这里插入图片描述

3.全部代码

代码放在 GitHub 了：https://github.com/larger5/web-logo

三、结尾

本来是件简单的事情，但网上对此的做法过于长篇大论，故写本文。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT小村

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue如何更换网页标签的logo

m0_63174529的博客

04-12

1215

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包一个人可以走的很快，但一群人才能走的更远。

vue怎么改logo_vue项目添加网页logo

weixin_39821718的博客

12-20

861

网上关于为vue项目添加网页logo的文章很多，步骤很简单，但是博主还是踩了坑，特此记录一下[○･｀Д´･ ○]先上效果：1.首先，要为网页添加logo我们需要一张ico格式的图标。可以用网上的在线转换工具，将“jpg/png”格式的图片转为“ico”，格式，这里我用的是“比特虫”,最好选16*16格式的，比较兼容生成后的文件记得重命名为“favicon.ico”(这里就是博主踩的第一个大坑，我自...

参与评论您还未登录，请先登录后发表或查看评论

vue项目中如何修改网页地址栏中小图标（网站logo）+文字

08-10

5万+

本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项

VUE 之项目常规配置详解

我的世界我的光彩

03-13

4485

ESLint 是一个开源的 JavaScript 代码检查工具，可以用来检查代码中的潜在问题和风格问题，以确保代码的一致性和可读性。this.$route.params 是一个对象，包含了路由中的动态参数，例如在路由配置中定义了一个动态参数 id，可以通过 this.$route.params.id 来获取该参数的值。在这个例子中，使用 request 拦截器添加了一个认证信息的请求头，在 response 拦截器中处理了响应，如果响应状态码为 200，则返回响应数据，否则返回一个错误的 Promise。

如何将一个现有的Vue网页项目封装成electron桌面应用

Aglaia_web的博客

07-23

2368

简介需求缘由基础步骤总结参考内容需求缘由开发了很久的网页项目，领导突然想变成桌面应用，又要重写代码？no，no，no。不可能的。重写代码吃力不讨好，浪费时间，浪费精力。那么我们该怎么办呢？幸好，electron是如此神奇，它提供了一种能让你将任何前端代码的网站页面封装成桌面应用。无论是vue，react 还是 angular等现有的框架都能实现。基础学习该内容需要基本的 javascript 语法基础，以及 node.js 基础。步骤 1，安装electron依赖包（局部安装，只安装开发依赖）

Vue项目套壳安卓webview项目记录

jimson_zhu的博客

01-27

1279

第五步创建的assets目录其实就是指路径file:///android_asset/，后边的 dist/index.html 就是要访问的文件地址。实例化我们的StatusBar类，然后填写参数，将我们当前界面的activity和想要设置的颜色color传进去，即可大功告成。Android状态栏的设置要在版本5.0以上，所以我们的方法需要对手机SDK版本进行判断。这里我们需要编写两个初始化方法：一个是设置颜色，一个隐藏状态栏，满足不同界面的需求。在我们的MainActicity中调用该方法就行，

vue项目图标

weixin_30647065的博客

05-09

289

项目图标iconfont 网址：http://www.iconfont.cn 转载于:https://www.cnblogs.com/jiayonghua/p/10839803.html

vue2项目设置浏览器标题title及图标logo

小韩要快乐！

03-26

4338

vue2 修改网页标题和图标

Vue 自定义网站logo

gdgztt的专栏

12-31

712

Vue 自定义网站logo

Vue项目设置网站小徽标

做笔记/记录遇到的前端bug

06-30

661

Vue项目中自定义浏览器小徽标图文详解

如何更改VUE项目运行名称以及Logo图标

Echosansa的博客

04-20

6106

第一步、打开VUE项目，找到public文件夹第二步、再打开index.html文件，第三步：修改title里面的文字信息（修改运行名称）运行时效果（运行名称）第四步：进入阿里巴巴字体图标库内（修改Logo）第五步：选中图标点击下载（修改logo）第六步：选择png格式下载第七步：保存图片后，在线搜索图片png转ico格式工具，实现在线转换第八步：把转换成ico格式的图片寸放至项目public文件内第九步：打开index.html文件.

vue如何更换网页标签的logo，2024年最新怎么学web前端开发

m0_61549674的博客

04-18

510

前端字节跳动真题解析网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Vue-element-admin在左上角添加LOGO的方法

sigaer的博客

12-02

6399

vue-element-admin如何添加logo

关于Vue官网的风格指南整理

qq_44727563的博客

02-07

619

看了Vue官方的风格指南，做下记录 A部分：必要的 1 组件名为多个单词为了避免组件名与HTML标签名冲突。 2 组件的data必须是一个函数当一个组件的data是一个对象时，它会在这个组件的所有实例共享，造成数据混乱。将data定义成一个函数返回一个对象，利用闭包可以很好的规避此问题。参考@一个小开心呀的回答：首先定义的 xx.vue文件在编译之后是一个类，每个地方使用这个组件的时候，相当于对这个类实例化，在实例化的时候执行data，如果不是一个函数...