整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文將帶領(lǐng)大家使用vue-cli + electron-builder構(gòu)建一個(gè)Hello World
Electron是一個(gè)基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript構(gòu)建跨平臺應(yīng)用的技術(shù)框架，兼容 Mac、Windows 和 Linux。
在開始搭建項(xiàng)目之前，需要安裝以下工具
node.js
先查看是否已經(jīng)安裝了vue-cli，vue-cli的版本是什么
vue -V
如果版本叫老，可以直接卸載，再安裝最新版本
卸載
npm uninstall vue-cli -g
安裝
install @vue/cli -g
選取一個(gè)項(xiàng)目存放的路徑，然后開始創(chuàng)建項(xiàng)目例如：
vue create electron-vue-helloworld
這里將項(xiàng)目名定為：electron-vue-helloworld輸入完上述命令之后進(jìn)入vue項(xiàng)目的創(chuàng)建過程。出現(xiàn)以下內(nèi)容
Vue CLI v3.8.4
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
第一個(gè)選項(xiàng)是 “default” 默認(rèn)，只包含babel和eslint第二個(gè)選項(xiàng)是 “Manually select features”自定義安裝
選擇自定義安裝，進(jìn)入下一步選擇
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
?? Babel
? TypeScript
? Progressive Web App (PWA) Support
? Router
? Vuex
? CSS Pre-processors
? Linter / Formatter
? Unit Testing
? E2E Testing
這里我們選擇
然后進(jìn)入下一步
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) n
這一步是設(shè)置router是否使用history模式，這里我們選n，接著進(jìn)入下一步
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
? Stylus
這里是設(shè)置css預(yù)處理模塊，在這里我要強(qiáng)調(diào)一下，不需要亂選，選擇我們熟悉的一種，在這里我們選擇 Stylus ，然后進(jìn)入下一步
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
? ESLint + Standard config
ESLint + Prettier
這一步是選擇ESLint代碼檢查工具的配置，這里我們選擇標(biāo)準(zhǔn)配置“ESLint + Standard config”，然后進(jìn)入下一步
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
?? Lint on save
? Lint and fix on commit
這一步是選擇什么時(shí)候執(zhí)行ESLint檢查，這里我們選擇保存時(shí)檢查“Lint on save”,然后進(jìn)入下一步
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
? In package.json
這一步是詢問 babel, postcss, eslint這些配置是單獨(dú)的配置文件還是放在package.json 文件中，這里我們選擇“In package.json”，然后進(jìn)入下一步
? Save this as a preset for future projects? (y/N) N
這一步是詢問時(shí)候以后創(chuàng)建項(xiàng)目是否也采用同樣的配置，這里我們選N。到目前為止，vue項(xiàng)目是創(chuàng)建完成了，我們等待項(xiàng)目下載依賴包，等項(xiàng)目構(gòu)建完畢我們開始集成electron
進(jìn)入項(xiàng)目根目錄（electron-vue-helloworld），然后執(zhí)行下列命令：
vue add electron-builder
這個(gè)時(shí)候會安裝electron-builder的依賴，可能比較耗費(fèi)時(shí)間，請大家耐心等待，安裝完成后會出現(xiàn)以下選型：
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
? ^6.0.0
這一步是選擇Electron的版本，我們這里選擇最新版本6.0.0，等待安裝完成即可。安裝完成后會在src目錄下生成background.js，并在package.json 文件中修main為"main": "background.js"
至此，所有的安裝都已經(jīng)完成了，接下來我們就可以運(yùn)行程序看效果了。
執(zhí)行以下命令，運(yùn)行程序
npm run electron:serve
在啟動的時(shí)候，會啟動很久，并出現(xiàn)以下信息
INFO Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
這是在安裝vuejs devtools，由于網(wǎng)絡(luò)問題，一直安裝不上。重試5次之后就會自動跳過并且啟動程序。
編譯成功后，會自動彈出一個(gè)桌面程序，如下圖所示
下一期我們將詳細(xì)的講一下background.js，里邊的一些參數(shù)都是干什么用的。
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來非常簡單，本教程基于 Vue 2.1.8 版本測試。
學(xué)習(xí)前，您需要了解的知識：
HTML
CSS
JavaScript
第一個(gè)實(shí)例
Vue 2.0 Hello World
<divid="app"><p>{{ message }}</p></div>
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來非常簡單，基于 Vue 2.1.8 版本測試。
學(xué)習(xí)前，您需要了解的知識：
HTML
CSS
JavaScript
我主要介紹了 Vue2.x 版本的使用。
第一個(gè)實(shí)例
Vue 2.0 Hello World
<divid="app"><p>{{ message }}</p></div>
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
