Because of the company’s demand for this aspect, I have not been exposed to it before, so I spent some time to read the electron vue document.

First labeled electron – vue document address: simulatedgreg gitbooks. IO/electron – vu…

Then follow the detailed steps of the document step by step:

# Install vuE-CLI and scaffolding boilerplate code

npm install -g vue-cli

View the VUE version: vUe-v

If the above image appears, the installation is successful

vue init simulatedgreg/electron-vue electron-vue-demo

Install dependencies and run your program

cd electron-vue-demo

Then follow the instructions

Yarn is officially recommended, and yarn is also recommended for individuals. The specific reasons are not detailed here, but you can learn about them yourself.

After the dependency installation is complete, run your program through Yarn Run dev. If the program runs successfully, the following interface will appear. This is an example provided by the authorities:

Now it’s time to combine your own projects:

Create a config folder as shown in the picture. Many students will ask why this folder is used. Don’t worry, here’s what you’ll find out:

Add the following code to the dev.env.js file in the config folder:

module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"https://xxx.xxxx.com"'// Adjust the API_ROOT for your own project:'"https://xxx.xxxx.com"'
}
Copy the code

Add the following code to the index.js file in the config folder:

module.exports = {
  build: {
    env: require('./prod.env')
  },
  dev: {
    env: require('./dev.env')}}Copy the code

Ha ha, I believe I posted the contents of the folder many students will understand, yes, is used to configure the interface request domain name address. But that alone certainly can’t be applied to the application, this is where the combination of Webpack. Those of you who have seen the documentation know that there are two main processes, the main process and the render process. Main process configuration is relatively simple, the main or rendering process, so we need in webpack. The renderer. Config. Js introduced before the config folder configuration file.

const config = require('.. /config/index.js')
Copy the code
plugins: [
    new webpack.DefinePlugin({
      'process.env': process.env.NODE_ENV === 'production' ? config.build.env : config.dev.env
    }),
]
Copy the code

So we reference the previous file into the program.

Next, I will talk about some problems and solutions in the process of project integration, hoping to help some students who have similar problems.

JSX syntax sugar is used in the company project, so you need to add the following code in the.babelrc file:

"plugins": ["transform-vue-jsx"."transform-runtime"] 
Copy the code

Otherwise, the following problems will occur

Yarn Run build = yarn Run build = yarn run build = yarn run build

"electron-builder": "^ 20.19.2"// We need to replace with"electron-builder": "^ 19.19.1".Copy the code

Repeat the previous command, press Enter, and sure enough, we see what we need in the Build folder

Haha… Game Over !

On the one hand, I wrote this article to share the happiness of learning with children. On the other hand, I also wrote this article to record my own growth process. I am not long into the front end of a code farmers, what need to be corrected in the article welcome you to actively point out, I will try to correct. Don’t spray if you don’t like it, thank you!

If you need to reproduce, please attach the source address, ha ha…