Electron-vue的安装

发表于 | 分类于

前言

今天开始学习桌面开发，我们公司项目又是基于Vue开发的，所以今天就去了解了一下Electron，并且自己安装了一下Electron-vue。这里主要是记录一下怎么安装

什么是Electron

Electron可以让你使用纯 JavaScript 调用丰富的原生 API 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。应用启动的入口是一个与 Node.js 模块相同的 package.json文件。

Electron核心

electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉的前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。

简单理解就是：给web项目套上一个node环境的壳。

什么是Elctron-vue

一个基于Vue和Electron的脚手架就是Electron-vue

安装Elctron-vue

安装环境

安装好node.js（全局安装）
安装好npm（全局安装）

如果没有安装好的话，先去node.js官网安装好所需要的环境，这里就不多解释了。

安装Electron

要安装预编译好的的二进制文件, 请使用 npm。 首选的方法是在项目中作为development dependency安装。
npm install electron --save-dev

然后全局安装Electron
npm install electron -g

1
2
electron -v
出现版本号

输入electron-v 如果出现版本号，则代表安装成功了。

初始化项目

运行，vue init simulatedgreg/electron-vue 项目名称

vue init simulatedgreg/electron-vue admin

这里的admin是项目名称，可以换成其它名称，看个人意愿。

选择配置

接下来就是一些配置选择了，基本上一路回车就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Application Name     admin
应用程序名称
Application Id       com.example.yourapp
应用程序ID
Application Version  0.0.1
应用程序版本
Project description  An electron-vue project
项目描述
Use Sass / Scss?     Yse
是否使用Sass/Scss  
Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) axios
 (*) vue-electron
 (*) vue-router
 (*) vuex
 (*) vuex-electron
选择要安装的Vue插件，这里基本上默认就可以了，直接回车
Use linting with ESLint?   No
是否使用ESLint？
Set up unit testing with Karma + Mocha?   No
使用Karma + Mocha设置单元测试?
Set up end-to-end testing with Spectron + Mocha?   No
使用Spectron + Mocha设置?
What build tool would you like to use?    Electron-packager
您想使用什么构建工具?
author          **********
作者

安装依赖

配置完成后，就需要进行安装依赖了。我们要进入到刚刚创建的文件夹的根目录中。
cd admin
然后开始安装依赖
npm install
这里安装会比较久，所以耐心等待一下。
安装完成后，你可以在根目录看到一个文件夹 node_modules 如果有，则表示安装成功。

运行项目

当你安装成功后，就可以直接运行项目了
npm run dev
如果弹出一个桌面应用，那就表示安装成功了。
Electron-vue

总结

安装Electron-vue后，你就可以开始着手准备开发自己的桌面应用了，可以结合Element-UI或者是iview两种UI组件库。我们可以发现，其实桌面应用的开发并不难，好好学，就可以的了。加油！