📚 Mini 模式实现,待完善

package.json

@@ -24,7 +24,6 @@
     "qrcode.vue": "^1.7.0",
     "vue": "^2.6.11",
     "vue-i18n": "^8.17.0",
-    "vue-router": "^3.1.6",
     "vuex": "^3.1.3",
     "xgplayer": "^2.6.14",
     "xgplayer-hls.js": "^2.1.6"
@@ -32,7 +31,6 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-router": "~4.3.0",
     "@vue/cli-plugin-vuex": "~4.3.0",
     "@vue/cli-service": "~4.3.0",
     "@vue/eslint-config-standard": "^5.1.2",

src/App.vue

@@ -1,6 +1,19 @@
 <template>
   <div id="app" :class="appTheme">
-    <router-view/>
+    <Aside />
+    <div class="body">
+      <Frame />
+      <Film v-show="view === 'Film'" />
+      <Play v-show="view === 'Play'" />
+      <Star v-show="view === 'Star'" />
+      <Setting v-show="view === 'Setting'" />
+    </div>
+    <transition name="slide">
+      <Detail v-if="detail.show"/>
+    </transition>
+    <transition name="slide">
+      <Share v-if="share.show"/>
+    </transition>
   </div>
 </template>
 <script>
@@ -12,6 +25,15 @@ export default {
     }
   },
   computed: {
+    view () {
+      return this.$store.getters.getView
+    },
+    detail () {
+      return this.$store.getters.getDetail
+    },
+    share () {
+      return this.$store.getters.getShare
+    },
     theme () {
       return this.$store.getters.getTheme
     }
@@ -39,6 +61,20 @@ html, body, #app{
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  .body{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 0 20px 20px;
+  }
 }
 </style>

src/background.js

@@ -16,7 +16,6 @@ let mini
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
 function createWindow () {
-  // Create the browser window.
   win = new BrowserWindow({
     width: 1680,
     height: 720,
@@ -30,12 +29,9 @@ function createWindow () {
   })
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
     if (!process.env.IS_TEST) win.webContents.openDevTools()
   } else {
-    createProtocol('app')
-    // Load the index.html when not in development
     win.loadURL('app://./index.html')
   }
 
@@ -46,24 +42,26 @@ function createWindow () {
 
 function createMini () {
   mini = new BrowserWindow({
-    // width: 540,
-    // height: 360,
-    width: 980,
-    height: 720,
-    frame: true,
+    width: 1140,
+    height: 360,
+    frame: false,
     resizable: true,
     transparent: false,
     webPreferences: {
-      webSecurity: false
-    },
-    parent: win,
-    modal: true,
-    show: false
+      webSecurity: false,
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+    }
   })
-  mini.loadURL('http://localhost:8080/#/mini')
-  // mini.show()
-  mini.once('ready-to-show', () => {
-    mini.show()
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    mini.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'mini')
+    if (!process.env.IS_TEST) mini.webContents.openDevTools()
+  } else {
+    mini.loadURL('app://./mini.html')
+  }
+
+  mini.on('closed', () => {
+    mini = null
   })
 }
 
@@ -79,6 +77,9 @@ app.on('activate', () => {
   if (win === null) {
     createWindow()
   }
+  if (mini === null) {
+    createMini()
+  }
 })
 
 ipcMain.on('min', () => {
@@ -109,7 +110,11 @@ ipcMain.on('mini', () => {
 })
 
 app.on('ready', async () => {
+  if (!process.env.WEBPACK_DEV_SERVER_URL) {
+    createProtocol('app')
+  }
   createWindow()
+  createMini()
 })
 
 // Exit cleanly on request from parent process in development mode.

src/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
 import store from './store'
 import 'modern-normalize'
 import Register from './components/register'
@@ -21,7 +20,6 @@ const i18n = new VueI18n({
 })
 
 new Vue({
-  router,
   store,
   i18n,
   render: h => h(App)

src/mini/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import Mini from './Mini'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(Mini)
+}).$mount('#app')

src/router/index.js

@@ -1,25 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-import Mini from '../views/Mini.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/mini',
-    name: 'Mini',
-    component: Mini
-  }
-]
-
-const router = new VueRouter({
-  routes
-})
-
-export default router

src/views/Home.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="home">
-    <Aside />
-    <div class="body">
-      <Frame />
-      <Film v-show="view === 'Film'" />
-      <Play v-show="view === 'Play'" />
-      <Star v-show="view === 'Star'" />
-      <Setting v-show="view === 'Setting'" />
-    </div>
-    <transition name="slide">
-      <Detail v-if="detail.show"/>
-    </transition>
-    <transition name="slide">
-      <Share v-if="share.show"/>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Home',
-  computed: {
-    view () {
-      return this.$store.getters.getView
-    },
-    detail () {
-      return this.$store.getters.getDetail
-    },
-    share () {
-      return this.$store.getters.getShare
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.home{
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  .body{
-    flex: 1;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 0 20px 20px;
-  }
-}
-</style>

vue.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  pages: {
+    index: 'src/main.js',
+    mini: 'src/mini/main.js'
+  },
   pluginOptions: {
     electronBuilder: {
       nodeIntegration: true

yarn.lock

@@ -1174,7 +1174,7 @@
     webpack "^4.0.0"
     yorkie "^2.0.0"
 
-"@vue/cli-plugin-router@^4.3.1", "@vue/cli-plugin-router@~4.3.0":
+"@vue/cli-plugin-router@^4.3.1":
   version "4.3.1"
   resolved "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.3.1.tgz#0ba589f4e9a1f3e64a8ff6ccd92f7ce2845586bf"
   integrity sha512-m0ntr5R6q62oNMODgoyHAVAd/sDtsH15GdBrScZsPNeyHxmzmNBDlsNM38yYGGY064zDRRWif15d1yaTREybrA==
@@ -9689,11 +9689,6 @@ vue-loader@^15.9.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-router@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
-  integrity sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA==
-
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"