vue从创建到完整的饿了么（9）页面图标ico的设置

最新推荐文章于 2024-07-23 17:06:34 发布
最新推荐文章于 2024-07-23 17:06:34 发布
阅读量555 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ui ViewUI
原文链接：https://segmentfault.com/a/1190000010943136
本文介绍如何为Vue项目设置页面图标，并逐步完善City组件功能。包括图标下载、放置位置、引入方法以及运行效果验证。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

说明

1.上一章--city.vue布局及vuex的state属性的简单使用
2.苍渡大神项目源码--项目地址
3.UI框架--Mint ui
4.数据接口地址--接口地址
5.下一章--city.vue完善（v-if 及本地缓存的存储与读取）

icon页面图标

1.先看一下目前的home.vue页面
图片描述

大家可以看到，页面右下角console里有一个404错误--这是因为咱们没有设置页面图标，在上方我标出了有页面图标和没有页面图标的区别。

2.下载。
网上随便搜一个ico图标下载。如在这个网站里下一个酷酷的ico图标。
图片描述

3.位置
把下好的ico图标放到项目的state文件夹里，并改名为favicon.ico
图片描述

4.获取
在项目根目录下的index.html加入

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

5.运行
ok，代码改完了，运行试试！
图片描述

解决！各位老铁可以看到，console里的404错误没有了，咱们的页面图标也出现了，而且还是一个帅气的牛头！

home.vue的功能先写完了，那咱们下面来完善city.vue的功能

【Vue项目实战】vue.js2.5 饿了么APP（1）概述+项目准备
小陈的博客
05-12 4343
一、概述 1. 项目简介 使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。 代码规范： （1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写高可维护，
项目总结：vue.js2.5饿了么APP（1）概述+项目准备
Sabrina_cc的博客
06-05 4748
一、概述 1. 项目简介 使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。 代码规范：（1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写
vue高仿饿了么外卖商家点餐小项目
03-22
根据教程手动敲得代码，使用了vue2.x框架，vue-cli2.x的脚手架，给需要的小白参考,代码中的逻辑纯属个人观点
vu3使用饿了么ui组件库的icon图标
xiaokangna的博客
09-14 737
【代码】vu3使用饿了么ui组件库的icon图标。
饿了么UI库--Vue开发必备神器--让你轻松设计出好看的页面
wei1273356078的博客
06-01 1万+
本篇文章有两种方案让你使用Element-UI 网站快速成型工具 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 这篇文章的作用就是让自学的小伙伴们，少费点时间，把时间用在学习新的知识上。为什么这么说呢？在使用饿了么UI库时，有不少的坑的。 1.CDN使用 — 推荐刚学完vue基本知识的小伙伴 看 Element-UI 官网的介绍使用CDN引入会有坑的。看着是不是好简单，直接复制粘贴引入到html文件中就可以使用了？？？ 还有关键的一个步骤的。需要引入v
【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）、以及已有iconfont.css怎么添加新的图标
牧之的博客
05-13 5523
elementUI中输入框的密码框属性，默认是一个始终睁眼的图标，测试今天提bug要有闭眼效果（无大语）…因为elementUI中的icon没有闭眼的，所以还要去下载引入效果图：点击后。
【vue前端项目实战案例】之Vue仿饿了么App
最新发布
柯晓楠
07-23 2542
该项目是一款仿“饿了么”商家页面的外卖类App，主要有以下功能。首先需要安装Node.js 12以上的版本，因为Node.js中已经继承了NPM，所以无需在单独安装NPM。然后再安装Vue脚手架（Vue-CLI）以及创建项目。 项目的调试使用Google Chrome浏览器的控制台进行，在浏览器中按下F12键，然后单击“切换设备工具栏”，进入移动端的调试界面，可以选择相应的设备进行调试，效果如图1 所示。
vue2 + vuex 高度还原 饿了么 App，用真实数据登陆官网，并实现购物车、下单功能
cangdu123的博客
02-21 4486
前言vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目，选择了饿了么也只是因为经常用，熟悉它的布局。之前的饿了么官网是用angular写的，最近才发现原来这段时间改成了vue，看来饿了么也入了vue的坑。既然要写一个完整的项目，就要认真对待
一篇文带你使用vue完成一个完整后台
m0_67393295的博客
03-09 2003
介绍 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你 vue-element-admin定位是后台集成方案，不适合当基础模板进行二次开发，项目集成了许多用不到的功能，会造成代码沉余 vue-admin-template是一个后台基础模板，建议使
项目：Vue.js高仿饿了吗外卖APP（一）
兔子juan的博客
07-24 7635
使用Vue.js作为项目的技术栈！这是目前最火的MVVM框架（之一），轻量、简洁、高效、数据驱动、组件化的优点，被大家称为“简单却不失优雅，小巧而不乏大匠”！ 开发此项目需要的前置知识： HTML CSS JavaScript 还需要es6(目前很重要)...
饿了么ui自定义表头内容
xiaokangna的博客
08-03 1367
使用方法：slot="header"代表着表头，设置表头内容，但是slot-scope="scope"需要加上，否则不会显示，然后再设置列的内容即可。工作日常分享：今天有个需求，在表头上家一个？号，还是圆圈中带一个问号。实现方法：饿了么组件库中自带的参数。......
HTML中引用icon图标
qq_43804601的博客
05-03 1万+
简单介绍在HTML如何中引用icon图标 1.登录iconfont官网 生成连接 ① 搜索想引用的图标，找到后加入购物车 ② 在购物车中将icon图标添加至项目 ③ 点击生成新代码 生成代码（示例）： //引入iconfont的声明 @font-face { font-family: 'iconfont'; /* Project id 3373080 */ src: url('//at.alicdn.com/t/font_3373080_hrq4d4vg3gp.woff2?t=1651
vue从创建到完整的饿了么（11）组件的使用（svg图标及watch的简单使用）
weixin_34072637的博客
09-04 513
说明 1.上一章--city.vue的完善（v-if的使用及本地缓存的存储与使用）2.苍渡大神的源码地址--项目源码地址3.UI框架--Mint UI4.数据接口地址--接口API5.下一章--miste.vue 开始 1.创建在src下的page文件夹下创建 miste 文件夹，在其中创建 miste.vue文件，代码如下 2.路由在s...
高仿“饿了么”Vue项目（一）
热门推荐
hanhf的专栏
05-03 2万+
高仿“饿了么”Vue项目（一）　　当我们把Vue框架的概念过了一遍之后，要进一步提升，就要看看别人是怎么使用Vue框架来做项目了。　　在github上有不少好的Vue项目，我找到了其中的一个，并把它作为下一步学习的目标。　　链接地址：https://github.com/bailicangdu/vue2-elm　　这是一个基于vue2+vuex构建的，具有45个页面的大型单页面应用，它高仿了“饿了...
更改饿了么树形结构图标样式
Shuai_YeYe的博客
11-10 1706
更改饿了么树形结构图标样式 把箭头样式更改为文件夹打开闭合样式，如果无子集则显示为空，自己搞出来的，跟大家分享一下，就直接上代码了 /* 树形样式 */ .el-tree{ padding: 0 0 0 20px; } .el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .el-tree .el-icon-care
element-ui饿了么框架中导航菜单中箭头方向问题
farmland
08-30 1万+
这是饿了么默认导航样式（下、上） 然而大部分使用场景、用户习惯是下边这种箭头方向（右、下） element组件中没办法更改icon的值 采用覆盖element组件的css样式，或者直接更改依赖模块中的源码 源码： /*菜单打开*/ .el-submenu.is-opened&gt;.el-submenu__title .el-submenu__icon-arrow { ...
62. Vue 饿了么Mint UI组件的基本使用
DevOps海洋的渔夫@专栏
08-25 1606
前言 前面的篇章基本已经说明在webpack中如何构建vue框架的时候。除了这些基础框架的要素，为了快速开发app应用。还要借助于更多的开源组件。 本篇章就来介绍一下如何基本使用饿了么的Mint UI组件。 使用 饿了么的 MintUI 组件 Github 仓储地址 Mint-UI官方文档 image-20200315104421188 腾讯说明文档 image-202003...
饿了么ui自定义el-select小三角图标
LQS5858的博客
12-11 1518
修改饿了么ui的三角图标
Vue+jQuery开发仿饿了么点餐静态页面教程
标题“vue实现仿饿了么点餐静态页面.zip”表明这个项目是一个使用Vue.js技术开发的静态页面。它模仿了国内知名的在线外卖服务平台“饿了么”的点餐界面。静态页面意味着这个页面主要是由HTML和CSS构建的，不涉及后端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值