Vue 设置带图标的按钮 - Font Awesome 和 Element UI 两种方法

在 Vue 中设置带图标的按钮可以使用第三方图标库，如 Font Awesome 或者 Element UI 提供的 Icon 组件。

使用 Font Awesome

1. 在项目中引入 Font Awesome 的样式文件，可以在 index.html 中添加 CDN 链接，也可以通过 npm 安装并引入。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

2. 在 Vue 组件中使用带图标的按钮：

<template>
  <button>
    <i class="fas fa-user"></i> 登录
  </button>
</template>

在上面的代码中，<i class="fas fa-user"></i> 表示使用 Font Awesome 提供的用户图标。

使用 Element UI

1. 安装 Element UI 并引入相应的组件。

npm install element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 在 Vue 组件中使用带图标的按钮：

<template>
  <el-button type="primary" icon="el-icon-user">登录</el-button>
</template>

在上面的代码中，icon="el-icon-user" 表示使用 Element UI 提供的用户图标。

以上是两种常见的设置带图标的按钮的方法，具体根据项目需求和喜好选择适合的方式。