(5)用vue写去哪网——iconfont的使用、路径别名、css变量

news/2024/7/10 2:37:32 标签: vue, iconfont使用, 路径别名, css变量

1. iconfont的使用

在iconfont官网选好自己项目中使用的svg图标,将这些图标添加到指定项目中,然后点击下载到本地,解压后,可用的文件是:iconfont.cssiconfont.eot、svg、ttf、woff这四种字体,将iconfont.css文件和其他的第三方css文件放在一起,将四种字体文件放在一个名为iconfont的文件夹中,这样做就是归个类而已。

需要注意的是:四个字体被iconfont.css文件引入,而iconfont.css被main.js入口文件引入,这样组件都可以使用iconfont.css了。

 四个字体被iconfont.css文件引入是url路径:

 iconfont.css被main.js入口文件引入:

 在组件中的使用:任意标签 + class=iconfont转义字符

<span class="iconfont">&#xe61e;</span>

注意:要确保iconfont.css文件完整,不要随意删除里面的代码。 

还有其他的使用方式:待完善

2. 路径别名

在build文件夹下,有webpack.base.conf.js文件中,resolve对象,可以设置路径别名,在全局中生效

3. css变量

在组件样式style标签中引入定义变量的文件,注意在style中引入文件时,import前加@,路径前加~

@import '~styles/varible.styl'

变量的定义:$变量名 = css属性值

$bg = #00bcd4

4. 补充知识点:

(1)display:flex,flex-grow的使用

(2)git知识:

创建一个分支:git checkout -b 分支名,

将本地仓库的代码提交到分支:git push origin 分支名

(3)vue超链接:router-link标签取代a标签,to属性取代ref属性

(4)yarn命令:yarn run dev 开启开发模式的服务器;yarn add 插件名  添加插件

 


http://www.niftyadmin.cn/n/584619.html

相关文章

在C#中调用dll

编译 dll 文件。把 dll 文件拷贝到工作文件夹下面。在右边文件夹的【引用】上右击&#xff0c;选择【添加引用】&#xff0c;在【com】中浏览 选择&#xff0c;即可添加。也可以在菜单【项目】/【添加引用】上添加。如果需要修改&#xff0c;需要把管理员目录下的 dll 文件删除…

! [rejected] master - master (non-fast-forward)

出现 master -> master (non-fast-forward)这个错误&#xff0c;表明&#xff1a;你的本地仓库是新的代码&#xff0c;而你的远程仓库还是之前版本的代码 我在写项目的时候&#xff0c;下面这两种情况先出现了这种错误&#xff1a; &#xff08;1&#xff09;git init ——…

变量、字段、属性

类的成员&#xff1a; 1. 常量 → 固定的值 2. 字段&#xff08;变量&#xff09; → 会变化的值 3. 属性 → 受保护的值 4. 方法 → 一系列动作和行为 5. 运算符 → 特定的运算方式&#xff08;&#xff0c;&#xff0c;-&#xff0c;*&#xff0c;/&…

(6)用vue写去哪网——轮播图组件

1. 用他人的组件&#xff0c;还不如自己有能力写一个轻量级的符合自己项目的轮播图组件&#xff0c;哎&#xff0c;但是js忘了好多&#xff0c;不会写啊&#xff0c;等以后有能力再写。 2. 使用GitHub上最火热的一个轮播图组件&#xff1a;vue-awesome-swiper &#xff08;1&…

C#产生随机验证码

一、先看一下实现的效果&#xff1a; 二、具体实现 #region 声明变量 public string yanzhengma ""; bool bolStar true; Panel pyanzhengma new Panel(); #endregion private void FRM_denglu_Load(object sender, EventArgs e) { AnimateWindow(Handle, 1000, 0…

分支合并同步到master上和master合并同步到分支上

1. 分支合并同步到master上 2. master合并同步到分支上 比如&#xff1a;分支上只有1,2两个文件&#xff0c;master上有1,2,3,4,5五个文件&#xff0c;我们要将master上的五个文件merge合并或者说同步到分支上&#xff0c;使分支的文件与master一样。 &#xff08;1&#xf…

职员信息查询

一、先看一下实现效果&#xff1a; SQL Server 表查询 SQL Server 表结构 二、案例源码&#xff1a; //----------------------显示职员信息查询窗体----------------------------- private void menuItem8_Click(object sender, System.EventArgs e) { if (this.checkChildFrm…

smartGit的操作、文字上边框对齐、vue中弹窗组件、全局组件的引入

1. smartGit的基础操作——切换分支提交代码 &#xff08;1&#xff09;在自己的branch上开发功能&#xff0c;然后将代码commit到本地仓库 &#xff08;2&#xff09;切换到master上&#xff0c;pull最新的master到本地&#xff0c;确保muster是最新的 &#xff08;3&#…