在開發(fā)Vue項目時，使用Vue Cli是非常方便的，這個工具幫助我們快速創(chuàng)建項目，并且提供了很多有用的插件。如果我們需要使用MySQL來存儲數(shù)據(jù)，Vue Cli同樣也可以幫助我們輕松地實現(xiàn)這個功能。

首先，在你的項目中安裝MySQL。你可以使用npm安裝mysql和mysql2包來完成這個任務(wù)。在命令行中依次輸入以下命令：

npm install mysql --save
npm install mysql2 --save

MySQL連接考慮用mongoose,在命令行輸入以下命令：

npm install mongoose --save

建立連接文件

const mongoose = require('mongoose');
const DB_URL = 'mongodb://localhost:27017/test';
mongoose.connect(DB_URL);
mongoose.connection.on('connected', () =>{
console.log('MongoDB connected success');
});
mongoose.connection.on('error', () =>{
console.log('MongoDB connected fail');
});
mongoose.connection.on('disconnected', () =>{
console.log('MongoDB connected disconnected');
});

這里，我們假設(shè)你已經(jīng)有了一個數(shù)據(jù)庫和一張數(shù)據(jù)表。在Vue Cli中，可以使用Axios來請求MySQL數(shù)據(jù)庫中的數(shù)據(jù)。在需要使用Axios的組件中導(dǎo)入Axios：

import axios from 'axios'

現(xiàn)在，我們可以編寫一個函數(shù)來請求數(shù)據(jù)庫中的數(shù)據(jù)：

getData() {
axios.get('/getData', {
params: {
tableName: 'your_table_name'
}
}).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
}

上面的代碼中，我們調(diào)用了Axios的get方法來請求MySQL數(shù)據(jù)庫中的數(shù)據(jù)。我們傳遞一個包含tableName屬性的對象作為參數(shù)，這個屬性指定了需要請求的數(shù)據(jù)表的名稱。如果請求成功，可以在控制臺中看到返回的數(shù)據(jù)；如果請求失敗，也會在控制臺中打印出錯誤信息。

如果你需要將數(shù)據(jù)發(fā)送到MySQL數(shù)據(jù)庫中，你可以使用Axios的post方法。在需要使用Axios的組件中，導(dǎo)入Axios：

import axios from 'axios'

現(xiàn)在，我們可以編寫一個函數(shù)來向MySQL數(shù)據(jù)庫中插入數(shù)據(jù)：

postData() {
axios.post('/postData', {
tableName: 'your_table_name',
data: {
name: 'your_name',
password: 'your_password',
email: 'your_email'
}
}).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
}

上面的代碼中，我們調(diào)用了Axios的post方法來向MySQL數(shù)據(jù)庫中插入數(shù)據(jù)。我們傳遞一個包含tableName和data屬性的對象作為參數(shù)，tableName屬性指定了需要插入數(shù)據(jù)的數(shù)據(jù)表的名稱，data屬性是一個包含需要插入的數(shù)據(jù)的對象。如果插入成功，可以在控制臺中看到返回的數(shù)據(jù)；如果插入失敗，也會在控制臺中打印出錯誤信息。

以上就是在Vue Cli中使用MySQL的示例代碼。希望這個教程可以幫助大家在Vue開發(fā)中順利地使用MySQL。