評論裏有知友反應, 這篇文章沒啥技術含量, 其實這篇文章是一個非常非常簡單入門的文章, 我寫出來只是想給沒接觸這方面的同學一個快速搭建環境的小教程, 前端大神請繞行請繞行請繞行

一直苦惱於mac下面的各種命令行裏的操作(對就是笨和懶，我一直記不住命令行裏各種命令和參數)，一直想學習下桌面開發，把各種命令替換成各種點點點，但是拜託於拖延症(就是懶..)，一直沒有付出於行動，今天鼓起勇氣，下定決心(更多是前段時間學習了下vue開發，有更多的興趣搞前端了)，決定用electron+vue+element ui搭建一個brew的桌面版。

下面錄製了個小視頻介紹下環境的搭建

視頻封面

Electron-Vue搭建桌面程序

開發步驟

首先按照 SimulatedGREG/electron-vue, 的Getting Started 把環境建立起來.

  1. 安裝vue-cli: npm install -g vue-cli
  2. 初始化一個electron-vue項目: vue init simulatedgreg/electron-vue ./
  3. 下載依賴: yarn
  4. 本地啟動: yarn run dev
  5. 打包: yarn build

在開發環境搭建的時候需要注意下面倆點:

1. electron-vue 雖然說使用npm也可以下載依賴, 但是最好不要用, 在我這個版本測試的時候, 使用npm下載依賴打包時有問題2. 選擇打包工具的時候, 選擇electron packager, 不要選electron builder, builder在打包的時候回從aws上面下載資源, 但是我這即使使用了某些不可說的工具, 也下載不下來這些資源, 會導致打包失敗.

環境搭建好之後, 把element-ui引進進去.

1. 在package.json裏添加

"element-ui": "2.4.11"

2. 在main.js裏添加

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

3. 修改LandingPage.vue, 下面這一段就是從element官網copy的一段代碼, 然後我把它精簡了一下, 下面這段代碼就當做我們演示element

<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="[1, 3]">
<el-submenu index="1">
<el-menu-item index="1-1">選項1</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>

<el-container>
<el-header style="text-align: right; font-size: 12px">
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>

<script>
export default {
data() {
const item = {
date: 2016-05-02,
name: 王小虎,
address: 上海市普陀區金沙江路 1518 弄
};
return {
tableData: Array(5).fill(item)
}
}
};
</script>

<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}

.el-aside {
color: #333;
}
</style>

推薦閱讀：

相關文章