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模塊