关于vue.js:vue项目本地使用icon

2次阅读

共计 459 个字符,预计需要花费 2 分钟才能阅读完成。

vue 我的项目本地应用 icon

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们常常会应用到字体图标, 在这里我抉择的是阿里巴巴矢量图标库, 上面我来分享一下, 在 vue 我的项目中导入本地应用 icon 的办法, 心愿对你有所帮忙。
4. 将图标下载至本地

5. 删除红框局部

6. 把其余文件, 复制到本人的我的项目中, 在 assets 中新建文件并且把方才拷贝的文件放到新建目录下, 构造如下:

7. 在 main.js 中增加如下代码:

import './assets/chenicon/iconfont.css';
// 进行全局导入, 这样我的所以组件中都能够应用; 如果整个我的项目只有一个页面应用了, 能够单个页面进行导入 

8. 在 vue 组件中应用办法, 增加如下代码:

<i class="iconfont icongouwuche"></i>
<i class="iconfont iconyemian-copy"></i>

9. 成果如下:

10. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

正文完
 0