electron+vue+iView

vue init simulatedgreg/electron-vue my-project
cd my-project
yarn
yarn run dev
yarn add iview --save
yarn add iview-editor --save
yarn add iview-loader --save
yarn add iview-area --save
yarn run build

vue关闭eslint检查：

.eslintignore 添加src（代码所在文件夹）

使用iview

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

import iView from 'iview' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式




if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

Vue.use(iView) //使用iview组件 
/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

使用iview-loader（不然Circle等使用不了)

yarn add iview-loader --save-dev
//在webpack.redenrer.config.js中添加
module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        options: {
                            
                        }
                    },
                    {
                        loader: 'iview-loader',
                        options: {
                            prefix: true
                        }
                    }
                ]
            }
        ]
    }

electron右键菜单

const {remote} = require('electron');
const {Menu, MenuItem} = remote;

var template1 = [{
  label: '编辑',
  submenu: [{
    label: '撤销',
    accelerator: 'CmdOrCtrl+Z',
    role: 'undo'
  }, {
    label: '重做',
    accelerator: 'Shift+CmdOrCtrl+Z',
    role: 'redo'
  }, {
    type: 'separator'
  }, {
    label: '复制',
    accelerator: 'CmdOrCtrl+C',
    role: 'copy'
  }, {
    label: '粘贴',
    accelerator: 'CmdOrCtrl+V',
    role: 'paste'
  }]
}, {
  label: '帮助',
  submenu: [{
    label: '学习更多',
    click: function () {
      electron.shell.openExternal('http://electron.atom.io')
    }
  }]
}];

//右键餐单
const menu = Menu.buildFromTemplate(template1)

window.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    menu.popup({window: remote.getCurrentWindow()})
}, false)

vue 双击事件

@dblclick.native="rightshow"

vue 右键并阻止冒泡

@contextmenu.native.stop="rightshow"

vue router(路由)

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '*',
      redirect: '/'
    },
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default
    },
    {
      path: '/login',
      name: 'login-page',
      component: require('@/components/login').default

    }

  ]
})
使用(path)：
<router-link to="/login" >login</router-link>
<input type="primary"><router-link to="/" >登录</router-link>
或者(name):
<input type="primary"><router-link to="landing-page" >登录</router-link>

窗口模糊透明支持win10,mac不太稳定