Electron+vue-建立一个简单项目

1.什么是Electron+vue

  Electron使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用.

  Electron+vue 基于vue来快速开发桌面应用

2.前置条件

安装nodeJs   ，官网 http://nodejs.org/

node-v
v8.11.1

2.安装

2.1.安装 vue-cli 和 脚手架样板代码

npm install -g vue-cli

 

2.2下载模版，建立项目

 

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

vue init simulatedgreg/electron-vue

 

 

? Generate project in current directory? Yes
? Application Name electron-vue-demo
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-electron, vue-route
r, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? builder
? author jifeng.zhang

   vue-cli · Generated "electron-vue-demo".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)

2.3npm install

 

npm install

 

3.项目目录结构

 

4.src目录介绍

主进程：main/index.js运行的进程是主进程。对应文件目录src/main

渲染进程：renderer进程，就是页面呈现的。对应文件目录src/renderer

通讯：ipc / remote模块