vue+electron+接口请求的 项目文件

好的，以下是一个使用 Vue.js 和 Electron 进行服务器接口请求的 Demo： 首先，你需要按照上面的步骤安装 Electron 和 Vue CLI，并创建一个 Vue.js 项目。 然后，安装 axios 和 electron-store： ``` npm install axios electron-store --save ``` axios 是一个用于发送 HTTP 请求的库，electron-store 是一个 Electron 应用的本地存储库。 接着，在 `src` 目录下创建一个 `api.js` 文件，用于发送服务器接口请求： ```javascript import axios from 'axios' import store from 'electron-store' const instance = axios.create({ baseURL: 'http://localhost:3000', // 服务器接口地址 timeout: 5000 // 请求超时时间 }) instance.interceptors.request.use(config => { const token = store.get('token') // 从本地存储中获取 token if (token) { config.headers.Authorization = `Bearer ${token}` // 设置请求头中的 Authorization } return config }, error => { return Promise.reject(error) }) instance.interceptors.response.use(response => { return response.data }, error => { return Promise.reject(error) }) export default instance ``` 其中，`baseURL` 是服务器接口地址，`timeout` 设置了请求超时时间，`interceptors` 用于设置请求拦截器和响应拦截器。拦截器中可以添加一些公共的请求参数，例如 token。 然后在 Vue.js 组件中使用 `api.js` 发送请求： ```vue <template> <div> <h1>发送服务器接口请求</h1> <div v-if="loading">正在加载...</div> <div v-else> <div>{{ data }}</div> <button @click="fetchData">发送请求</button> </div> </div> </template> <script> import api from './api.js' export default { data() { return { loading: false, data: '' } }, methods: { fetchData() { this.loading = true api.get('/data').then(data => { this.loading = false this.data = data }).catch(error => { this.loading = false console.error(error) }) } } } </script> ``` 这样，就可以在 Electron 中发送服务器接口请求了。当然，服务器接口需要根据实际情况进行编写。

首先，你需要先安装 Node.js 和 Vue CLI，然后执行以下步骤： 1. 创建一个基于 Vue CLI 的项目，可以使用以下命令： ```bash vue create my-electron-app ``` 2. 安装 electron 和 electron-builder： ```bash npm install --save-dev electron electron-builder ``` 3. 在项目根目录下创建一个 main.js 文件，用于 Electron 的主进程： ```javascript const { app, BrowserWindow } = require('electron') let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) mainWindow.loadURL(process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : `file://${__dirname}/index.html`) mainWindow.on('closed', () => { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (mainWindow === null) { createWindow() } }) ``` 4. 在 package.json 中添加以下脚本： ```json { "scripts": { "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" } } ``` 5. 在 src 目录下创建一个 api.js 文件，用于封装接口请求： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL }) export default { get: (url, params) => instance.get(url, { params }), post: (url, data) => instance.post(url, data) } ``` 6. 在项目根目录下创建一个 .env 文件，用于存储 API 的基础 URL： ``` VUE_APP_API_BASE_URL=http://localhost:3000 ``` 7. 在组件中使用 API： ```javascript import api from '@/api' export default { data () { return { items: [] } }, mounted () { api.get('/items').then(response => { this.items = response.data }) } } ``` 最后，你可以使用以下命令启动 Electron 应用程序： ```bash npm run electron:serve ``` 或者使用以下命令构建可分发的应用程序： ```bash npm run electron:build ```