要使用Vue.js来连接MySQL数据库，你需要在Vue项目中安装相关的依赖和设置服务器来进行连接。下面是一些连接MySQL数据库的步骤：

1. 安装依赖：在Vue项目的根目录中打开终端，并执行以下命令来安装项目所需的MySQL包：

npm install mysql --save

2. 创建MySQL连接：在需要连接MySQL的Vue组件中，引入mysql模块，并配置数据库连接参数。例如，在你的Vue组件的`<script>`标签中添加以下代码：

```javascript

import mysql from 'mysql';

const connection = mysql.createConnection({

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

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

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

database: 'mydatabase' // 数据库名称

});

connection.connect((err) => {

if (err) {

console.error('Error connecting to MySQL:', err);

} else {

console.log('Connected to MySQL database');

}

});

3. 执行SQL查询：一旦成功连接到MySQL数据库，你就可以执行SQL查询了。例如，你可以在组件的方法中执行一条查询，并将结果显示在页面上。下面是一个例子：

```javascript

methods: {

fetchUsers() {

const sql = 'SELECT * FROM users';

connection.query(sql, (err, result) => {

if (err) {

console.error('Error executing query:', err);

} else {

this.users = result; // 将查询结果保存在组件的数据中

}

});

}

}

4. 在Vue组件中使用数据：在上述的例子中，查询结果被保存在了组件的`users`数据中。你可以在Vue组件的模板中使用该数据来显示在页面上。例如，你可以使用`v-for`指令循环遍历所有的用户，并将它们的信息显示出来：

以上就是使用Vue.js连接MySQL数据库的基本步骤。请注意，在连接MySQL数据库时，你需要确保MySQL服务器已启动，并且提供了正确的连接参数。另外，建议将数据库连接相关的代码封装到一个单独的模块中，以便在整个Vue项目中重复使用。这样可以更好地管理和维护数据库连接。