electron-vite-vue中如何在vue中使用electron和node的api

在 Electron-Vite-Vue 开发环境中，要让 Vue 组件访问 Electron 和 Node.js 的 API，你需要遵循以下步骤：

1. **安装依赖**:
- 首先，确保你在项目中已经安装了 `vite`、`@vue-electron/app` 和 `vue-template-compiler` 等必要库。可以使用 npm 或 yarn 来安装：

     npm install vite @vue-electron/app vue-template-compiler node-fetch
     # 或者
     yarn add vite @vue-electron/app vue-template-compiler node-fetch

2. **创建主进程和渲染进程**:
- 主进程（`main.js`）通常用于管理 Electron 应用的核心逻辑以及与 Node.js API交互：

     import { createApp } from 'vue';
     import App from './src/App.vue';
     import { createBrowserWindow } from '@vue-electron/browser-window';

     async function createWindow() {
       const win = await createBrowserWindow({
         width: 800,
         height: 600,
         webPreferences: {
           nodeIntegration: true, // 允许Node.js API访问
         },
       });
       win.loadHTMLFile('index.html'); // 指向你的Vite入口文件
       win.webContents.on('did-finish-load', () => {
         createApp(App).mount('#app-root');
       });
     }

     async function start() {
       await createWindow();
     }

     start();

- 渲染进程（`src/App.vue`）是Vue组件的运行环境，不需要直接操作Node.js API。

3. **在Vue组件中调用Node API**:
- 如果你想在Vue组件中使用Node API，可以通过 `window` 对象间接访问，因为 Electron 的渲染窗口允许Node集成：

     <template>
       <!-- ... -->
     </template>

     <script>
       export default {
         methods: {
           async getNodeApiData() {
             try {
               const response = await fetch('http://your-node-api-url/api/data');
               const data = await response.json(); // 假设API返回JSON数据
               console.log(data);
             } catch (error) {
               console.error(error);
             }
           },
         },
       };
     </script>

4. **安全注意事项**:
- 谨慎使用 `nodeIntegration`，因为它可能会带来安全风险，尽量限制访问敏感信息和操作。
- 使用 `webContents.send` 在主进程中发送消息到渲染进程，以便处理需要跨进程通信的情况。