在创建Vue项目时一般会用默认的项目标题和图标,如下图所示:

不是很美观也可能不符合项目的需求,所以有时候就需要改变项目在浏览器上方的标签名称或者图标。

找到项目根目录的index.html,如图:

进去就能够修改title,也就是在浏览器上方的标题

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>

如果需要在标题旁边加入自定义的图标,你需要把自己的的图片放在static目录下(不要放在src目录下,浏览器会找不到)
将favicon.ico的图标文件放到static文件夹内,在index.html的head中添加:

<link rel="icon" type="image/x-icon" href="static/favicon.ico">

保存并刷新浏览器,看浏览器图标已经正确设置上了。

web前端_Vue框架_设置浏览器上方的标题和图标的更多相关文章

  1. Web前端三大框架_angular.js 6.0(二)

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

  2. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  3. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  4. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

  5. 收集几个Web前端UI框架

    原文:http://www.isaced.com/post-200.html 关于Web前端UI库/框架,我觉得是非常方便的东西,对于我们这种业余的Web开发人员,有时候要写点前端代码的时候把UI框架 ...

  6. web前端技术框架选型参考

    一.出发点 随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域 掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...

  7. Web前端三大框架_vue源码笔记

    一.VUE 1.1 MVVM VUE也是基于MVVM模式实现的.特点就是数据双向绑定 在MVVM模式中,分成三个部分: M 模型 model V 视图 view VM 视图-模型 view-model ...

  8. Bootstrap(Web前端CSS框架)

    官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...

  9. vue,react,angular三大web前端流行框架简单对比

    常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...

随机推荐

  1. aapt命令获取apk具体信息(包名、版本号号、版本号名称、兼容api级别、启动Activity等)

    aapt命令获取apk具体信息(包名.版本号号.版本号名称.兼容api级别.启动Activity等) 第一步:找到aapt 找到sdk的根文件夹,然后找到build-tools文件夹.然后会看到一些b ...

  2. checkAll全选的一个小例子

    function checkAll(tag,flag) { //得到所有check var checkboxs = $(tag).closest("table").find(&qu ...

  3. EasyDarwin开源流媒体音视频云平台遇到的奇葩问题:内网运行正常,公网流媒体不通

    最近在帮助EasyDarwin的用户部署EasyNVR+EasyDarwin云平台+EasyClient方案的过程中,遇到一个问题,EasyNVR分布在用户各地区现场的内网中,EasyDarwin云平 ...

  4. Error:Execution failed for task ':app:clean'. > Unable to delete directory: ***/app/build/generated/***

    第一次从svn拉下来的工程,在clean的时候会出现 Error:Execution failed for task ':app:clean'. > Unable to delete direc ...

  5. HP叫魔术方法的函数

    PHP5.0后,php面向对象提成更多方法,使得php更加的强大!! 一些在PHP叫魔术方法的函数,在这里介绍一下:其实在一般的应用中,我们都需要用到他们!! 1.__construct() 当实例化 ...

  6. XMPP学习笔记 -- RFC 6120

    XMPP - Extensible Messaging and Presence Protocol 1. 中文版3920 http://wiki.jabbercn.org/RFC3920 2. 大部分 ...

  7. SIP学习笔记 -- RFC 3261

    1.SDP (rfc 4566)    1)用于交换参数    2)内容分三部分Session description, Time description and Media description ...

  8. Spring AOP-xml配置

    在spring AOP(一)中介绍了AOP的基本概念和几个术语,现在学习一下在XML中如何配置AOP. 在XML中AOP的配置元素有以下几种: AOP配置元素 描述 <aop:config> ...

  9. JS获取当前页面的URL

    如果获取“当前”域名 host = window.location.host; url=document.domain; url = window.location.href; 取得完整url路径: ...

  10. TCP与HTTP连接管理

    一. HTTP事务时延原因(HTTP权威指南 P86) 1.客户端首先需要根据URI确定WEB服务器的IP和端口号, 那么DNS解析上花的时间会很多(大多数HTTP客户端会有一个小的DNS缓存)   ...