electron

官網(wǎng)： Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術(shù)創(chuàng)建原生程序的框架，它負責(zé)比較難搞的部分，你只需把精力放在你的應(yīng)用的核心上即可。
我們可以在electron中使用vue/angular/react等目前市面上最流行的js框架。最近在學(xué)習(xí)vue，那么這里就選擇使用了vue作為開發(fā)應(yīng)用的框架。
官網(wǎng):https://electronjs.org

electron-vue

electron-vue 是一個結(jié)合 vue-cli 與 electron 的項目,避免了我們再自己去手動搭建cli,當(dāng)然了,在學(xué)習(xí)階段,最好還是能夠自己去嘗試著去搭建cli,畢竟學(xué)到了才是自己的。
官網(wǎng)：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

初始化

這里默認認為已經(jīng)安裝好了node和yarn,就不再說明如何安裝,注意需要把node的數(shù)據(jù)源切換為淘寶鏡像

npm config set registry http://registry.npm.taobao.org/

初始化項目:

# 安裝 vue-cli 和 腳手架樣板代碼
npm install -g vue-cli

# 初始化項目模板,初始化項目會根據(jù)網(wǎng)絡(luò)情況時間有所不同,需耐心等待
vue init simulatedgreg/electron-vue vue-markdown

? Application Name vue-markdown
? Application Id com.gemini.markdown
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install axios, vue-electron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? Yes
? Set up end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? packager
? author 李群 <477939838@qq.com>

   vue-cli · Generated "vue-markdown".
warning Failed to append commit SHA on README.md

在這里項目初始化完成后，使用了scss/sass,并且默認安裝了axios, vue-electron, vue-router, vuex等我們在項目中常用的vue全家桶。

# 安裝依賴并運行你的程序
cd vue-markdown
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

項目結(jié)構(gòu)

其中我們開發(fā)界面及邏輯的vue相關(guān)代碼就在renderer目錄。

結(jié)語

至此我們就初始化成功了electron-vue項目。后面我們再去一起學(xué)習(xí)其他相關(guān)的知識