electron-vue 集成 element-ui

簡介

什麼是 electron

Electron 是由 Github 開發，用 HTML，CSS 和 JavaScript 來構建跨平臺桌面應用程序的一個開源庫。 Electron 經過將 Chromium 和 Node.js 合併到同一個運行時環境中，並將其打包爲 Mac ，Windows 和 Linux 系統下的應用來實現這一目的。

Electron 於 2013 年做爲構建 Github 上可編程的文本編輯器 Atom 的框架而被開發出來。這兩個項目在2014春季開源。

目前它已成爲開源開發者、初創企業和老牌公司經常使用的開發工具

什麼是 electron-vue

electron-vue 是爲了要避免使用 vue 手動創建起 electron 應用程序。electron-vue 充分利用 vue-cli 做爲腳手架工具，加上擁有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最經常使用的插件，如vue-router、vuex 等等

什麼是 elecment ui

Element UI 是一套採用 Vue 2.0 做爲基礎框架實現的組件庫，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網站快速成型

安裝 electron-vue

# 安裝 vue-cli 和 腳手架樣板代碼
npm install -g vue-cli  //若是你已經安裝忽略此處
vue init simulatedgreg/electron-vue my-project

# 安裝依賴並運行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

運行結果以下:

安裝 element-ui

npm i element-ui -S

在 /my-project/src/renderer/main.js 中引入 element ui

// element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

此時就能夠在任意 .vue 文件中添加和使用 element-ui 元素了。

<el-button @click="message" type="success" icon="el-icon-search" round>默認按鈕</el-button>

運行效果以下:

總結

整個安裝過程並不複雜，
爲何是 electron 以我目前的技術棧來說 electron 是最容易上手的開發桌面程序的一個途徑，儘管他也有這樣或那樣的缺點，但總歸來講仍是瑕不掩瑜，此番安裝成功，接下來就開始了 electron 開發之旅

參考連接

electron-vue 文檔
element ui
博客地址