Vue引入阿里妈妈iconfont图标

算是难了

已于 2024-05-06 09:08:47 修改

阅读量1.5k

点赞数 14

文章标签： vue.js 前端 javascript

于 2024-05-05 20:33:40 首次发布

本文链接：https://blog.csdn.net/2301_76662406/article/details/138472799

版权

4.新建.eslintignore忽略文件（无后缀，普通文本文件）

选择素材

看见喜欢的就加入购物车

购物完就放到自己的项目中（项目提前创建好）

图标使用介绍

导入：

index.html 是 Vue.js 单页应用程序的入口 HTML 文件。它是 Vue 应用程序的主要 HTML 文件，用于加载 Vue 应用程序的 JavaScript 文件和其他必要的资源。

以下是一个示例的 index.html 文件的结构：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>

  
  <script src="app.js"></script>
</body>
</html>
在上面的示例中，index.html 文件包含了一个基本的 HTML 结构，包括 <head>和<body>
和部分。在<body>中，有一个空的<div> 元素，它的 id 设置为 "app"。
这个<div> 元素是 Vue 应用程序的挂载点，在应用程序初始化时，Vue 实例将会被挂载到这个元素上。
此外，index.html 中通过 <script>标签引入了 Vue 应用程序的 JavaScript 文件（app.js），它包含了 Vue 组件和应用逻辑的代码。这个 JavaScript 文件通常会被构建工具（如 webpack）处理和打包。

如果在 Vue 项目中没有编写

index.html 文件，Vue CLI（常用的 Vue.js 项目脚手架工具）会自动生成一个默认的

index.html 文件作为入口文件，并包含一些基本的结构和必要的标记。

使用Font class 和Symbol

1.引入

第一种:在线引入

在这个里面声明引入

第二种:构建图标项目文件,下载到本地引入

(1).自己在assets下创建如下结构文件夹

(2).官网的链接点击进去复制所有代码

Font class就切换到Font class栏粘贴css到iconfont.css文件
Symbl就切换到Symbo栏,粘贴js到iconfont.js文件

粘贴到对应文件

(3). 在main.js中全局引入

这三个文件都是之前创建好的,按需使用

其实这个地方,本地引入就是:

三个文件

导入自己创建的文件

明显没有在线引入好

2.新建.eslintignore忽略文件（无后缀，普通文本文件）

因为使用了eslint，引入第三方(阿里妈妈)文件，压缩的。不规范就报错,没有配置的忽略即可

注释掉的是忽略Eslint检查所有js文件，这里我们只需要告知，我们需要忽略的文件即可

3.在需要的地方直接使用

href名称就是字体图标库下面的名字

挑选相应图标并获取，应用于页面

使用 Font class

使用方法：

// 后面的类名就是你项目中，图标下面的名字，直接复制即可
 <i class="iconfont icon-fangdajing"></i>

使用Symbol(可引入彩色图标)：

使用方法：

<!-- icon类就是写在上面不是引入了三个文件
这个类写在自定义css样式文件中的,自己创建的类,按需初始化即可 -->
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diqiu"></use>
      </svg>

4.填充资源文件（不断添加，更新）

再次添加新的图标到项目中,此时就会提示你更新代码

(1).在线引入:

更新引入文件中的css/js在线链接

(2).本地创建文件引入,就点进去复制所有代码,更新自己创建的 css/js文件:

css文件对应:font class
js文件对应:Symbol (彩色图标)

补充(eslint)：

ESLint 是一个用于在 JavaScript 代码中进行静态代码分析和检查的工具，它可以帮助开发人员发现和修复潜在的问题、统一代码风格，并遵循预定义的规则和最佳实践。

在 ESLint 的配置中，有两个重要的文件：.eslintignore 和 .eslintrc.js。

.eslintignore 文件：

.eslintignore 文件用于指定哪些文件或目录应该被 ESLint 忽略，不进行代码检查。在该文件中，可以使用通配符和路径模式来匹配需要忽略的文件或目录。

例如，.eslintignore 文件示例：

node_modules/
dist/
*.min.js

上述配置表示忽略 node_modules/ 目录下的所有文件、dist/ 目录下的所有文件以及所有以 .min.js 结尾的文件。

.eslintignore 文件对于排除不需要进行代码检查的第三方库、构建输出目录以及其他不需要检查的文件和目录非常有用。

.eslintrc.js 文件：

.eslintrc.js 文件是 ESLint 的配置文件，用于指定 ESLint 的规则、插件、解析器和其他相关配置选项。它使用 JavaScript 代码编写，并导出一个配置对象。

例如，.eslintrc.js 文件示例：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
  ],
  rules: {
    // 规则配置
  },
};

在该文件中，可以配置 ESLint 的环境（如浏览器端或服务器端）、继承的规则集（extends）、自定义规则（rules）等。

.eslintrc.js 文件允许开发人员根据项目需求和团队规范，定制代码检查规则和配置选项，以确保代码质量和一致性。

总结：.eslintignore 文件用于指定应该被 ESLint 忽略的文件和目录，而

.eslintrc.js 文件用于配置 ESLint 的规则和选项。两者结合使用可以实现对 JavaScript 代码的静态分析和检查。