vue设置带icon的按钮的代码

Vue中设置带icon的按钮可以使用第三方的图标库，如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组件中使用带icon的按钮：

<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组件中使用带icon的按钮：

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

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

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