Small project based on Vue electron


Origin of the project

Because I want to use GUI, and I am a little white who is developing towards fontend developer, I naturally think of itElectronTo shell and turn web pages into desktop applications, I only knew about this field before, but I didn’t really practice it, so this project is also rightElectronLet’s know and learn.

The implementation of the project is aFile manager of Windows platformThe basic file operation functions, such as creating, deleting, copying, pasting, cutting and renaming, are realized.

Project address:

What is electron

Electron allows you to use pure JavaScript to call rich native APIs to create desktop applications. You can think of it as focusing on desktop applications rather than web servers, io.js A variant of.

This does not mean that electron is JavaScript bound to a GUI library. Instead, electron uses web pages as its GUI, so you can think of it as a condensed version of chromium controlled by JavaScript.

The following materials are for reference:
Electron (Wikipedia)
Chinese documents
The essence of electron
Getting started video tutorial

Technology stack

  • [x] Vue

  • [x] VueRouter

  • [x] Vuex

  • [x] Vue-Electron

  • [x] iView

  • [x] Eslint

  • [x] Babel

  • [x] Webpack

  • [x] Less

  • [x] Nodejs

The project uses Vue cli scaffold to build a development environment. Before coding, I searched gayhub and found that Dashen had written a scaffold based on Vue and electron. After reading the document, I found that it was just suitable for my needs and found a new continent in an instant.

Project Name:electron-vue
Project address:
Project documentation (in English)

PS: read the document carefully before you start coding.

Project catalogue

├──                            < = project introduction
├ - App < = development catalog
│├ -- dist < = compile and package
│├ - icons < = related icons
│├ -- SRC < = project source code
Main < = electronic main process
│   │   │   ├── application.js
│   │   │   ├──
│   │   │   ├── index.js
The rendering process
│   │   │   ├──  App.vue                  < = Vue root component
│   │   │   ├──  main.js                  < = Vue inlet
Assets < = static resources
Common < = public configuration
(1) config < = project configuration
Extend < = Vue extension related
The router < = Vue routing correlation
│   │   │   ├── store                   <=  Vuex
A view layer
│   ├──  index.ejs                        < = template file
│   ├──  package.json                     < = dependent dependency
𗍊 - build < = package desktop application
│   ├──  Gruntfile.js                     < = build script
│   ├──  package.json                     < = dependent dependency
├ - tasks < = Electronic packer packaging
│   ├── release.js
│   ├── runner.js
├ - Test < = Test folder  
│   ├── e2e
│   ├── unit
│   ├── .eslintrc
├──  config.js                            < = electronic package configuration
├── webpack.main.config.js
├── webpack.renderer.config.js
├── package.js


# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron app for production
npm run build

# lint all JS/Vue component files in `app/src`
npm run lint

# run webpack in production
npm run pack

Effect preview

Small project based on Vue electron

Small project based on Vue electron

Small project based on Vue electron

Small project based on Vue electron

Recommended Today

What is the file extension? What is the use? Easy to understand file extension explanation!

Link to the original text: catalog introduce effect Common extensions introduce fileThe file name extension is also known asfileThe suffix of isoperating systemUsed to markfile typeIn Windows system, the extension can also telloperating systemWhat is the defaultSoftwareopenfile. In general, an extension is followed by the main file name, separated by a period. An extension can […]