字体的怎么在vue中使用

　　介绍

本篇文章给大家分享的是有关字体的怎么在vue中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

Icon.register ({ 　　& # 39;才能chevron-right& # 39;:, { 　　,,,& # 39;宽度# 39;:,1280年, 　　,,,& # 39;高度# 39;:,1792年, 　　,,,& # 39;路径# 39;:,{ 　　,,,,,& # 39;d # 39;:, & # 39; M1107  877 l - 742, 742 q-19  19-45  19 t - 45 - 19 - l - 166 - 166 - q - 19 - 19 - 19 - 45 - t19 - 45 - l531 - 531 - 531 - 531 - q - 19 - 19 - 19 - 45 - t19 - 45 - l166 - 166问题19 - 19,45-19t45  19 l742  742 q19  19日,19日,45 t-19  45 z # 39; 　　,,,}] 　　,,} 　　});

<代码> chevron-right 这个是该图标的名字,在使用的时候通过

<代码> & lt;图标名称=癱hevron-right"祝辞& lt;/icon> 去使用,至于样式按照正常定义即可。

<代码>路径> 时候的路径信息

安装好了,进入正题……

准备工作:

安装<代码> vue-awesome

<代码> npm安装vue-awesome美元——保存

这个简单安装完成就好。

<强>结果预览

从图中看其实图标最后就是个svg <代码> 标签

字体的怎么在vue中使用“> </p> <p> <强>图标存放目录</强> </p> <p>为了开发方便,新建<代码> </代码> src/图标目录集中存放图标<代码> js代码</>文件</p> <p> <代码> $ cd src/</代码> </p> <p> <代码>美元mkdir图标,,cmod </代码> </p> <p>这里<代码> cmod> </代码是777权限,由于是用的是虚拟机,所以经常出现权限问题,因此索性直接给777(仅限本地开发)</p> <p> <强>图标组件</强> </p> <p>下载<代码>图标。vue </代码>文件</p> <p>到这里下载<代码>图标。vue </代码>文件,建议将整个项目git <代码> </代码>下来。</p> <p>这个组件的作用就是,用来创建<代码> & lt;图标名称=澳愕耐急阯ame 自定义标签。

然后把<代码>图标。vue> 组件目录下(放哪里可以自己决定)

在<代码> src/图标>

这个目录集中放置所有<代码>图标> js代码文件

创建出口文件<代码>索引。js代码这里面将引入所有图标<代码> js代码文件

//,/index.js src/图标 　　 　　import  & # 39;。/chevron-right.js& # 39;;//,……,其他需要的图标文件

以右键头图标为例:(<代码> chevron-right.js> import  Icon 得到& # 39;. ./组件/Icon.vue& # 39;; 　　 　　Icon.register ({ 　　& # 39;才能chevron-right& # 39;:, { 　　,,,& # 39;宽度# 39;:,1280年, 　　,,,& # 39;高度# 39;:,1792年, 　　,,,& # 39;路径# 39;:,{ 　　,,,,,& # 39;d # 39;:, & # 39; M1107  877 l - 742, 742 q-19  19-45  19 t - 45 - 19 - l - 166 - 166 - q - 19 - 19 - 19 - 45 - t19 - 45 - l531 - 531 - 531 - 531 - q - 19 - 19 - 19 - 45 - t19 - 45 - l166 - 166问题19 - 19,45-19t45  19 l742  742 q19  19日,19日,45 t-19  45 z # 39; 　　,,,}] 　　,,} 　　});

<强>项目入口主要。js引用字体库

项目主入口文件<代码>主要。js代码中引入<代码> vue-awesome> 图标/索引。js代码文件

引入图标组件

<代码>从& # 39;进口图标。/组件/图标# 39;;

引入图标内容文件

<代码> import & # 39;。/图标/index.js& # 39;;

然后将<代码>图标> vue>

<代码> Vue.component(& # 39;图标# 39;,图标),

注册完成之后,我们就可以在代码中直接使用<代码> & lt; icon> & lt;/icon>

<强>结束

使用步骤还是很简单的,经过上面的步骤之后我们就可以正常使用图标库了

总结下来步骤其实就下面几步

<李>

<代码> import图标。vue> <李>

<代码> you-icon。js代码> 图标。注册> <李>

【可选】新建图标文件出口文件,这个在使用的图标很多的时候比较方便

<李>

<代码> & lt;图标名称=澳阃急阯ame"祝辞& lt;/icon> 引用图标

<李>

给图标设置样式(大小可以通过<代码>变换:规模()来设置)

为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

字体的怎么在vue中使用