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 it
ElectronTo 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 right
ElectronLet’s know and learn.
The implementation of the project is a
File manager of Windows platformThe basic file operation functions, such as creating, deleting, copying, pasting, cutting and renaming, are realized.
Project address: https://github.com/k-water/electron-filesystem
What is electron
The following materials are for reference:
The essence of electron
Getting started video tutorial
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 address: https://github.com/SimulatedGREG/electron-vue
Project documentation (in English) https://simulatedgreg.gitbooks.io/electron-vue/content/en/
PS: read the document carefully before you start coding.
│ ├── README.md < = project introduction ├ - App < = development catalog │├ -- dist < = compile and package │├ - icons < = related icons │├ -- SRC < = project source code Main < = electronic main process │ │ │ ├── application.js │ │ │ ├── index.dev.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