Eletron-vue

Eletron-vue是vue-cli和Eletron的结合，感觉其实就是带着一个桌面应用壳子的谷歌浏览器、只需要关心renderer文件夹里面的内容、也就是说跟写vue一样的感觉

安装&运行

npm install -g vue-cli // 有vue脚手架可以不安
vue init simulatedgreg/electron-vue my-project //初始化一个项目 名字叫 my-project
cd my-project
npm install // 安装依赖 我挂着vpn好像安装不了 关了就好
npm run dev // 运行 不出意外就有一个小窗口弹出来

官网地址 https://electron.org.cn/

封装API

在renderer文件夹下创建api文件夹、然后创建modules文件夹、index.js、service.js、modules文件夹就放模块对应的请求函数、先创建个app.js

service.js

import axios from 'axios'
import cookie from 'js-cookie'

const prefix = '请求地址'
axios.defaults.timeout = 10000

axios.interceptors.request.use(
  config => {
    config.headers['Version'] = '1'
    config.headers['Token'] = cookie.get('token') || ''
    config.headers['Timestamp'] = cookie.get('timestamp') || 0
    config.headers['Signature'] = cookie.get('signature') || ''
    return config
  },
  error => Promise.reject(error)
)

axios.interceptors.response.use(
  response => {
    const {code} = response.data
    // 1003: 非法的签名, 1004: 非法的令牌, 1005: 令牌过期
    if (code === 1003 || code === 1004 || code === 1005) {
      alert('重新登录')  // 这里可以用iview或者element的Model框 然后OK的回调用router重定向到登录页面，记得引入import router from '@/router'就是了
    }
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default {
  get (url, params = {}) {
    return axios
      .get(prefix + url, {params})
      .catch(error => {
        console.log(error)
      })
  },
  post (url, params = {}) {
    return axios
      .post(prefix + url, params)
      .catch(error => {
        console.log(error)
      })
  }
}

app.js

import service from '../service'

export default {
  login (params) {
    return service.post('/staff/login', params)
  },
  logout (params) {
    return service.post('/staff/logout', params)
  },
  getUserProfile () {
    return service.get('/staff/profile/get')
  }
}

index.js

import appModule from './modules/app'

export default {
  ...appModule
}

不需要本地代理往往在开发环境都会用本地代理去解决跨域的问题，这里不需要

mynameisjohnahahah / Notes

Eletron-vue #7

Eletron-vue

安装&运行

封装API

打包