vue ui没反应_使用Electron-Vue 和 Element UI搭建桌面程序

更新: vue-element-admin 已经推出桌面版 electron-vue-admin. 望周知

---

评论里有知友反应, 这篇文章没啥技术含量, 其实这篇文章是一个非常非常简单入门的文章, 我写出来只是想给没接触这方面的同学一个快速搭建环境的小教程, 前端大神请绕行请绕行请绕行

---

一直苦恼于mac下面的各种命令行里的操作(对就是笨和懒，我一直记不住命令行里各种命令和参数)，一直想学习下桌面开发，把各种命令替换成各种点点点，但是拜托于拖延症(就是懒..)，一直没有付出于行动，今天鼓起勇气，下定决心(更多是前段时间学习了下vue开发，有更多的兴趣搞前端了)，决定用electron+vue+element ui搭建一个brew的桌面版。

下面录制了个小视频介绍下环境的搭建

Electron-Vue搭建桌面程序https://www.zhihu.com/video/1053641785053650945

开发步骤

首先按照 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>