vue+electron+服务器接口请求 demo

好的，以下是一个使用 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` 文件，用于发送服务器接口请求：

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` 发送请求：

<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 中发送服务器接口请求了。当然，服务器接口需要根据实际情况进行编写。