Introduction to the

As stated on the official website, electric-Vue is the boilerplate code for constructing the electron application based on VUE. The development of electron- Vue is the same as vUE, but if there are special requirements to modify the application, you need to use the related API of electron. The data in the project comes from here, thank you for sharing. Project address Git address

electron

Electron is an open source library developed by Github for building cross-platform desktop applications using HTML, CSS, and JavaScript. Electron does this by merging Chromium and Node.js into the same runtime environment and packaging it as an application for Mac, Windows, and Linux. (Official website)

vue

Not so much for vUE, website

preview

  • 18/11/05 update

  • 18/11/10 update

  • 18/11/12 Update playback page temporarily typeset

  • 19/02/18 Playback page Reconstruction

  • 19/02/19 Page reconstruction, add personal information page

  • 19/02/20 Some optimizations, playlist details page reconstruction

Project process

You can go to electron’s official website to learn about its development process and get a general idea of what it looks like. Then you can take a look at its API when you use it later.

Set up

npm install -g vue-cli  
vue init simulatedgreg/electron-vue ele-vue
cd ele-vue
npm install
npm run dev
Copy the code

The installation process all the way to enter the line, there will be a midway to let you choose the plug-in, but also for the back of their own manual to install, here according to the need to choose.

electron-packager

If you’re just starting out with the electron application or just need to create a simple executable, then the electron Packager will do the job for you.

electron-builder

If you’re looking for a complete installer, support for automatic updates, CI builds using Travis CI and AppVeyor, or automatic rebuild of native Node modules, you’ll need the electron Builder.

Or choose according to your own needs

The plug-in side

In electron-vue, a front-end UI component can also be used. Take Element-UI as an example

NPM I element-ui-s then introduces import ElementUI from in main.js'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Copy the code

electron

MainWindow = new BrowserWindow({height: 670,// window height: 1000,// window width: 1000,// window width: 1000,// window width: 1000,// window width:false// Whether to display window border resizable:false,// Can I zoom the movable:false}) // Add -webkit-app-region: drag; // Add -webkit-app-region: drag; // const {ipcRenderer: ipc} = require("electron");

  <span @click="send('close')"> x < / span > send (type) {
      ipc.send(type);
  },

  // src/main/index.js

  import { app, BrowserWindow, ipcMain } from 'electron'
  ipcMain.on('min', e=> mainWindow.minimize());
  ipcMain.on('max', e=> mainWindow.maximize());
  ipcMain.on('close', e=> mainWindow.minimize());
Copy the code

iconfont

When Element’s icon might not meet our needs, we could use Ali’s Iconfont. First go to the official website of Iconfont and choose the icon you want.

<link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css">
<i class="iconfont icon-play-circle"></i>

Global introduction of SCSS

` ` ` SRC/new renderer/globals SCSS $brand - primary: blue; Then in the electron - vue/webpack. The renderer. Config. Edit vue - loader configuration in js sass: 'vue - style - loader! css-loader! sass-loader? indentedSyntax=1&data=@import "./src/renderer/globals"', scss: 'vue-style-loader! css-loader! sass-loader? Data =@import "./ SRC /renderer/globals", {test: /\. SCSS $/, use: [' viet-style-loader ', 'css-loader', {loader: 'sass - loader' options: {data: '@ import ". / SRC/renderer/globals ";'}}}], don't forget to ";" ` ` `Copy the code

packaging

The package can be packaged directly by using NPM Run Build, or by adding parameters as needed for different platforms. The packaged installation package is located in the build folder of the project

The last

The e interface was developed in two days. So some of the patterns are not very beautiful. There is a problem that iconfont is not displayed after packaging. This problem will be solved later. The most direct way is to drop it to local reference.