Vue 项目中如何正确放置和引用 Iconfont 文件夹?

Vue 项目中如何正确放置和引用 Iconfont 文件夹?

iconfont图标文件夹的安置与引用

在使用阿里巴巴的iconfont时,经常会遇到需要将iconfont文件夹放置于特定位置的问题,以及在不同位置引用iconfont.css文件的疑惑。

iconfont文件夹放置位置

iconfont文件夹可以放在assets或static文件夹下。这两个文件夹都是用于放置静态资源的,在安装项目时会被引用。

引用iconfont.css

立即学习“前端免费学习笔记(深入)”;

iconfont.css文件既可以在index.html中引用,也可以在main.js中引用。

  • 在index.html中引用:可以全局加载图标资源,在所有页面生效。
  • 在main.js中引用:仅在当前页面生效,代码组织更清晰,组件可移植性更高。

目前大多数项目中,都倾向于在main.js中引用iconfont.css,原因如下:

  • Vue项目中,页面通常在组件中完成,而不在index.html中。
  • 在组件内引用公共资源更简洁,可移植性更高。

以上就是Vue 项目中如何正确放置和引用 Iconfont 文件夹?的详细内容,更多请关注其它相关文章!