How to use Electron-vue

How to use Electron-vue

According to the github page, to install Electron-vue, run these commands:

$ npm install -g vue-cli
$ vue init simulatedgreg/electron-vue my-project
$ cd my-project
$ npm install (or yarn)
$ npm run dev (or yarn run dev)

You will be asked some questions during the installing like this:

? Application Name (my-project)
? Project description (An electron-vue project)
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to inverse selection)
❯◉ axios
 ◉ vue-electron
 ◉ vue-router
 ◉ vuex
? Use linting with ESLint? (Y/n)
? Which eslint config would you like to use? (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
  AirBNB (https://github.com/airbnb/javascript)
  none (configure it yourself)
? Setup unit testing with Karma + Mocha? (Y/n)
? Setup end-to-end testing with Spectron + Mocha? (Y/n)
? What build tool would you like to use? (Use arrow keys)
❯ electron-builder (https://github.com/electron-userland/electron-builder)
  electron-packager (https://github.com/electron-userland/electron-packager)
? author (test <test@example.com>)

Now you should have the electron-vue project locally. To start the project, change the directory,

$ cd my-project

and use the following commands depending on what you want do. If you just want to run the project to see how it is like, run npm install (to install dependencies) then $ npm run dev. If errors emerge without sudo, try this: npm throws error without sudo.

# Install dependencies
npm install

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

# Build electron application for production
npm run build

# Run unit & end-to-end tests
npm test

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

After running $ npm run dev, you will see this:

And the installing is success.

Hello World

Maybe it is better to git init now if you want to use git to develop the electron-vue project. After doing so, we need to add components.

In electron-vue, there is always only one page; the page my-project/src/renderer/App.vue is always rendered. my-project/src/renderer/router/index.js assigns components to <router-view></router-view> of App.vue. And we make the components in my-project/src/renderer/components/.

We create our Hello World like this:

<template>
  <div>
    <router-link to="/">Hello World</router-link>
  </div>
</template>

<script>
  export default {
    name: 'hello-world',
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      }
    }
  }
</script>

and save this as my-project/src/renderer/components/HelloWorld.vue.

Then open my-project/src/renderer/router/index.js and add the component in the router.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default
    },

    // Add the following-----------------
    {
      path: '/hello-world',
      name: 'hello-world',
      component: require('@/components/HelloWorld').default
    },
    // ----------------------------------

    {
      path: '*',
      redirect: '/'
    }
  ]
})

And add the link to the default landing page (path: my-project/src/renderer/components/):

<template>
  <div id="wrapper">
    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
    <main>
      <div class="left-side">
        <span class="title">
          Welcome to your new project!
        </span>
        <system-information></system-information>
        <-! -------------Add the following------------- ->
        <router-link to="/hello-world">Hello World!</router-link>
        <-! ------------------------------------------- ->

And you will see the link is added. Click on it.

You will see the hello world page: