在Vue中连接MySQL数据库是一个常见的任务，可以通过以下几个步骤来实现：

第一步：安装依赖

在Vue项目的根目录下，打开终端并执行以下命令来安装mysql和mysql2依赖包：

npm install mysql mysql2 --save

这样就可以将mysql和mysql2依赖包添加到Vue项目中。

第二步：创建数据库连接池

在Vue项目的src目录下，创建一个名为database.js（或者其他你喜欢的名字）的文件。在该文件中，我们使用mysql包来创建数据库连接池，并导出该连接池。示例如下：

```js

const mysql = require('mysql');

// 创建数据库连接池

const pool = mysql.createPool({

host: 'localhost', // 数据库服务器地址

user: 'root', // 数据库用户名

password: 'password', // 数据库密码

database: 'mydatabase' // 数据库名

});

// 导出数据库连接池

module.exports = pool;

在上述代码中，我们使用mysql包的createPool方法来创建一个数据库连接池。通过传入连接参数，即数据库服务器地址、用户名、密码和数据库名，来配置连接池。

第三步：在Vue组件中使用数据库连接池

现在我们已经创建了数据库连接池，接下来可以在Vue组件中使用该连接池来进行数据库操作。在需要使用数据库的组件中，可以通过require语句引入数据库连接池，然后使用它执行SQL查询。示例如下：

```js

<template>

<div>

<ul>

<li v-for="user in users" :key="user.id">{{ user.name }}</li>

</ul>

</div>

</template>

<script>

const pool = require('../database'); // 引入数据库连接池

export default {

data() {

return {

users: []

};

},

mounted() {

pool.getConnection((err, connection) => { // 从连接池中获取一个连接

if (err) throw err;

connection.query('SELECT * FROM users', (err, results) => { // 执行SQL查询

connection.release(); // 释放连接

if (err) throw err;

this.users = results; // 将查询结果保存到组件的data属性中

});

});

}

};

</script>

在上述代码中，我们首先通过引入require语句引入之前创建的数据库连接池。然后在组件的mounted生命周期钩子函数中，通过调用getConnection方法从连接池中获取一个连接。在获取到连接后，可以使用该连接的query方法执行SQL查询。查询完成后，我们通过调用release方法释放连接，并将查询结果保存到组件的data属性中。

需要注意的是，在组件中使用数据库连接池的时候，建议将getConnection和query操作放在try-catch语句中，以便捕获潜在的错误并进行相应的处理。

通过以上步骤，你就可以在Vue中连接MySQL数据库并执行SQL查询了。当然，具体的代码实现还取决于你的具体需求，你可以根据自己的情况进行适当的修改和扩展。