vue项目实战_electron-vue 实战项目（更新中。。）

开个新坑玩下，如果新项目不赶的话应该会每周持续更新，断更就当我没说，(≧▽≦)/
目前技术栈：electron、vue、elementui、koa
主题：未定（金融类、图书类）

首先是环境构建

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm i element-ui -S
npm run dev

npm install koa-static koa-static-cache koa-router --save

项目目录

vue代码放在renderer文件夹，koa代码会放在main文件夹

然后是前端router构建

import Vue from 'vue'
import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

const indexRouter = {
  path: '/',
  name: 'index',
  component: require('@/components/index').default
}

const backUpRouter = {
  path: '*',
  redirect: '/'
}

const routes = [
  indexRouter,
  backUpRouter
]

const router = new Router({
  mode: 'history',
  base: process.env.VUE_APP_publicPath,
  routes: routes,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

router.onError((error) => {
  const pattern = /Loading chunk (d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  if (isChunkLoadFailed) {
    location.reload()
  }
})

export default router

koa中台代码：

function createWindow () {
  const Koa = require('koa')
  const app = new Koa()
  const path = require('path')
  const staticCache = require("koa-static-cache");
  const serve = require("koa-static")
  const router = require("koa-router")
  let child_router = require('./router/index.js')


  app.use(async (ctx, next)=> {
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (ctx.method == 'OPTIONS') {
      ctx.body = 200; 
    } else {
      await next();
    }
  });

  app.use(staticCache(path.join(__dirname, "public"), {
    maxAge: 365 * 24 * 60 * 60  //Add these files to caches for a year
  }))

  app.use(serve(path.join(__dirname, "public")))

  router.use('/', child_router);
  app.use(router.routes()).use(router.allowedMethods());

  app.listen(2999);

  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

持续更新中。。

electron-vue 实战项目（更新中。。）​segmentfault.com

你的点赞是我前进的动力！奥利给(≧▽≦)/