使用vscode如何实现vue+mysql简单查询，详细步骤

在VS Code中创建并运行Vue.js项目，并连接MySQL数据库，可以按照以下步骤操作：

1. **安装环境**:
- 安装Node.js：这是管理依赖和运行JavaScript应用的基础。
- 安装VS Code：下载并安装官方的代码编辑器。

2. **初始化Vue项目**:
- 打开VS Code，按下`Ctrl + Shift + P` 或者点击右上角的“命令”按钮，输入`Create New Vue Project`，选择模板（如Vue CLI 4）并创建项目。

3. **配置Vue项目**:
- 在项目的根目录下，打开`package.json`文件，在`scripts`部分添加以下内容，用于启动开发服务器和热加载：

     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build"

4. **安装Vue和相关插件**:
- 在项目根目录，运行 `npm install axios vue-router vuex mysql2 typescript ts-node @types/mysql2 --save-dev` 来安装处理API请求、路由、状态管理和MySQL操作的相关库。

5. **设置数据库连接**:
- 创建一个`.env`文件（通常放在根目录下），添加如下内容（替换为实际的数据库信息）：

     VUE_APP_DB_HOST=localhost
     VUE_APP_DB_USER=root
     VUE_APP_DB_PASSWORD=password
     VUE_APP_DB_NAME=myDatabase

确保在生产环境中从环境变量获取这些值而不是直接暴露。

6. **编写数据获取逻辑**:
- 在`src/api/index.ts`中，导入`axios`和`mysql2`：

     import axios from 'axios';
     import { createPool } from 'mysql2/promise';

- 编写连接池和查询函数：

     const pool = createPool({
       host: process.env.VUE_APP_DB_HOST,
       user: process.env.VUE_APP_DB_USER,
       password: process.env.VUE_APP_DB_PASSWORD,
       database: process.env.VUE_APP_DB_NAME,
     });

     export async function query(sql: string): Promise<any> {
       try {
         const [rows] = await pool.query(sql);
         return rows;
       } catch (error) {
         console.error('Error while querying MySQL:', error);
         throw error;
       }
     }

7. **在Vue组件中调用查询**:
- 导入`query`函数并在需要的地方使用它，例如一个列表组件：

     <script lang="ts">
     import { computed, ref } from 'vue';
     import { query } from '@/api/index';

     export default {
       // ...
       data() {
         return {
           items: ref([]),
         };
       },
       async created() {
         this.items.value = await query('SELECT * FROM your_table');
       },
       // ...
     };
     </script>