You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of `vue-cli` for scaffolding, `webpack` and `vue-loader`, and some of the most used plugins like `vue-router`, `vuex`, and more.
13
14
14
15
#### Check out the documentation [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
* Project scaffolding using [vue-cli](https://github.com/vuejs/vue-cli)
21
-
* Ready to use Vue plugins ([vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-resource](https://github.com/vuejs/vue-resource), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex))*
22
-
* Installed [vue-devtools](https://github.com/vuejs/vue-devtools) and [devtron](https://github.com/electron/devtron) tools for development
23
-
* Ability to easily package your electron app using [electron-packager](https://github.com/electron-userland/electron-packager)
24
-
* Handy NPM scripts
25
-
* Use of [webpack](https://github.com/webpack/webpack) and [vue-loader](https://github.com/vuejs/vue-loader) with Hot Module Replacement
26
-
* HTML/CSS/JS pre-processor support with [vue-loader](https://github.com/vuejs/vue-loader/)
27
-
* ES6 with [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) by default
28
-
* ESLint (with support for [`standard`](https://github.com/feross/standard) and [`airbnb-base`](https://github.com/airbnb/javascript))*
29
-
* Unit Testing (with Karma + Mocha)*
30
-
* End-to-end Testing (with Spectron + Mocha)*
31
18
19
+
* Support for both Vue.js at `2.x.x` and `1.x.x`\*
* Project scaffolding using [vue-cli](https://github.com/vuejs/vue-cli)
23
+
* Ready to use Vue plugins \([vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-resource](https://github.com/vuejs/vue-resource), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex)\)\*
24
+
* Installed [vue-devtools](https://github.com/vuejs/vue-devtools) and [devtron](https://github.com/electron/devtron) tools for development
25
+
* Ability to easily package your electron app using [electron-packager](https://github.com/electron-userland/electron-packager)
26
+
* Handy NPM scripts
27
+
* Use of [webpack](https://github.com/webpack/webpack) and [vue-loader](https://github.com/vuejs/vue-loader) with Hot Module Replacement
28
+
* HTML/CSS/JS pre-processor support with [vue-loader](https://github.com/vuejs/vue-loader/)
29
+
* ES6 with [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) by default
30
+
* ESLint \(with support for [`standard`](https://github.com/feross/standard) and [`airbnb-base`](https://github.com/airbnb/javascript)\)\*
31
+
* Unit Testing \(with Karma + Mocha\)\*
32
+
* End-to-end Testing \(with Spectron + Mocha\)\*
32
33
33
34
\*Customizable during vue-cli scaffolding
34
35
35
36
### Getting Started
37
+
36
38
This boilerplate was built as a template for [vue-cli](https://github.com/vuejs/vue-cli) and includes options to customize your final scaffolded app. The use of node `v5.10.0` or higher is required as certain ES6 are used in dependencies and scripts. But the use of `6.x` is recommended for its extra performance benefits.
37
39
38
40
```bash
@@ -47,10 +49,18 @@ npm run dev
47
49
```
48
50
49
51
##### Are you a Windows User?
52
+
50
53
Make sure to check out [**A Note for Windows Users**](https://simulatedgreg.gitbooks.io/electron-vue/content/docs/getting_started.html#a-note-for-windows-users) to make sure you have all the necessary build tools needed for electron and other dependencies.
51
54
52
55
### Next Steps
56
+
53
57
Make sure to take a look at the [documentation](https://simulatedgreg.gitbooks.io/electron-vue/content/). Here you will find useful information about configuration, project structure, and building your app. There's also a handy [FAQs](https://simulatedgreg.gitbooks.io/electron-vue/content/docs/faqs.html) section.
54
58
59
+
### Future Plans
60
+
61
+
Be up to date with new features and improvements by checking on the [GitHub Project](https://github.com/SimulatedGREG/electron-vue/projects/2).
62
+
55
63
### Contributing
64
+
56
65
Wanting to submit a pull request? Make sure to read [this](docs/contributing.md) first.
Copy file name to clipboardExpand all lines: docs/project_structure.md
+26-9Lines changed: 26 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,29 @@
1
1
# Project Structure
2
-
When it comes to making electron apps, project structure is a little different. The documentation below attempts to explain how the boilerplate works and the differences when the app is built.
2
+
3
+
When it comes to making electron apps, project structure is a little different. The documentation below attempts to explain how the boilerplate works and the differences when the app is built.
3
4
4
5
## Using two `package.json`'s
5
-
Yes, you read that right. There are **two**`package.json` files. Here's why...
6
-
1.**Bloatware** makes our build's file size way too large for distribution. Do we really want to include all those large `node_modules` along with all their miscellaneous files, and even those modules that we are only using during development (ex. `vue-loader`, `eslint-loader`)? NO, we need to separate our dependencies.
7
-
2.**Native NPM modules** (those written in C, not pure JavaScript) for our app need to be compiled against electron. [**More info**](http://electron.atom.io/docs/tutorial/using-native-node-modules/). If we used only one `package.json`, how would we know which modules need to be compiled for electron and the others with your local instance of node for development? It might be possible, but separating our dependencies just makes more sense.
6
+
7
+
Yes, you read that right. There are **two**`package.json` files. Here's why...
8
+
1.**Bloatware** makes our build's file size way too large for distribution. Do we really want to include all those large `node_modules` along with all their miscellaneous files, and even those modules that we are only using during development \(ex. `vue-loader`, `eslint-loader`\)? NO, we need to separate our dependencies.
9
+
2.**Native NPM modules**\(those written in C, not pure JavaScript\) for our app need to be compiled against electron. [**More info**](http://electron.atom.io/docs/tutorial/using-native-node-modules/). If we used only one `package.json`, how would we know which modules need to be compiled for electron and the others with your local instance of node for development? It might be possible, but separating our dependencies just makes more sense.
8
10
9
11
#### `./package.json` is for all your development needs
12
+
10
13
Here you should install modules that you only need during development. Items include scripts, pre-processors, module loaders, etc. In this boilerplate all of the `webpack` dependencies are saved here and **will not** be published in the final production build.
11
14
12
15
#### `./app/package.json` is for your actual electron app
13
-
**This `package.json` is your app's manifest.** Here you should install all your dependencies needed in your final app. It is inside this `app` folder that electron-packager creates production builds.
16
+
17
+
**This **`package.json`** is your app's manifest.** Here you should install all your dependencies needed in your final app. It is inside this `app` folder that electron-packager creates production builds.
14
18
15
19
##### Installing Native NPM modules
20
+
16
21
As mentioned above, we need to make sure our native npm modules are built against electron. To do that, we can use [electron/electron-rebuild](https://github.com/electron/electron-rebuild).
17
22
18
23
## File tree
24
+
19
25
#### During development
26
+
20
27
```
21
28
electron-vue
22
29
├─ app
@@ -51,7 +58,9 @@ electron-vue
51
58
└─ package.json
52
59
└─ webpack.config.js
53
60
```
61
+
54
62
#### Production builds
63
+
55
64
```
56
65
app.asar
57
66
├─ dist/
@@ -60,18 +69,26 @@ app.asar
60
69
├─ electron.js
61
70
└─ package.json
62
71
```
72
+
63
73
##### Notice
64
-
**`node_modules`** are ignored in production builds
74
+
75
+
`node_modules` are ignored in production builds
65
76
66
77
As you can probably tell, almost everything is stripped down in final production builds. This is almost mandatory when distributing electron apps, as you do not want your users to download bloated software with a large file size.
67
78
68
79
#### On the subject of webpack bundling
69
-
All modules within the dependency tree of `app/src/main.js` will be bundled with webpack. In other words, webpack will **only** bundle your renderer process JavaScript.
80
+
81
+
All modules within the dependency tree of `app/src/main.js` will be bundled with webpack. In other words, webpack will **only** bundle your renderer process JavaScript.
70
82
71
83
> What about bundling my main process?
72
84
73
-
There is currently no plan to support main process bundling as hot-reloading is not stable enough *yet* for node processes. Without it, developing in the main process would require restarting your electron app every time you want to run new code. In my opinion, find another way to accomplish your task in the renderer process.
85
+
~~There is currently no plan to support main process bundling as hot-reloading is not stable enough _yet_ for node processes. ~~
74
86
75
-
> Is there a workaround?
87
+
There are currently major plans to support main process modules and those features can be tracked from the [GitHub Project](https://github.com/SimulatedGREG/electron-vue/projects/2).
88
+
89
+
Without hot-reloading, developing in the main process would require restarting your electron app every time you want to run new code. In my opinion, find another way to accomplish your task in the renderer process or wait for future support that will be coming soon.
90
+
91
+
> Is there a current workaround?
76
92
77
93
Yes, but it can be cumbersome when building in production. Check [this issue](https://github.com/SimulatedGREG/electron-vue/issues/22) for more information.
0 commit comments