How to make Vue.js and Electron work together

Introduction

On the wave of popularity (I hope that they are popular) Vue.js and Electron , a reasonable question arises, and how to make them work together. In this small tutorial, I will explain how to quickly install and configure a template for developing applications on Electron and Vue.js. And so we begin.

What we need

yarn - package manager, analogue of npm . I chose yarn because I just like this tool, however you can use npm. How to install yarn here, and npm here;
vue-cli is a console utility that allows you to quickly initialize projects on Vue.js by adding support for webpack ;
electron-vue is a template that we will use.

Installation

Run our terminal and enter the command to install vue-cli:

yarn global add vue-cli

Similarly for npm:

 npm install vue-cli -g

Then create a project:

 vue init simulatedgreg/electron-vue <_>

Instead of <_> write the name of the folder into which you want to put all the files for work.

During installation, we will be asked the following questions:

? Application name : project name.
? Project description : description of the project.
? Select which Vue plugins to install : select the plugin that we want to install;
? Use linting with ESLint : whether you will use ESLint (linter or game that will check your JS code for the style guide).
? Setup up unit testing with Karma + Mocha : install the Karma and Mocha tests.
? Setup Up End-to-End Testing with Spectron + Mocha : Install Spectron and Mocha for end-to-end testing.
? What builder would you like electron-builder or electron-packager ; I advise electron-builder, since there are fewer problems with it.
? author : your name.

After answering the questions, go to our directory and install the necessary packages:

 cd <_> yarn

For npm:

 cd <_> npm install

And, to check the performance of all installed, run the application:

 yarn dev

Or:

 npm run dev

And we should see the following:

And what's next?

Next we analyze the main folders that are in our working directory:

.electron-vue : all configs for webpack;
build : when you build your project, here you will find all the files that came out after the build (installer, unpacked version); there is also an icons folder in which you need to place application icons for different operating systems;
dist : in development mode, an application is launched from this folder, so it does not make sense to touch it;
src : all source code of your application:
- main : files for working with the Main process in Electron;
- assets : pictures and other media;
- components : the storage location of all Vue components;
- router : files for vue-router ;
- store : files for vuex ;

Assembly

To build your application, enter:

 yarn build

Or:

 npm run build

The result will appear in the build folder. Settings for electron-builder are in package.json in the build section.

Conclusion

Now you have a great working environment, and if you want to know more, here is the official documentation: here .

Source: https://habr.com/ru/post/358432/

All Articles