Electron-Vue 环境搭建 + 基本入门 + 软件打包

electron是一个使用JS，CSS，HTML构建跨平台的桌面应用程序的框架，微软的VScode就是使用该技术开发.

环境搭建

1. 安装node环境

2. 由于使用的是electron-vue脚手架工具，首先要安装vuecli

1 2 3

npm install -g @vue/cli # OR yarn global add @vue/cli

3. 起步

vue init阶段会出现一些项目基本选项，按照自己需求选择就好，打包工具选择elelctron-builder之后会用到它打包和更新

1 2 3 4 5 6 7 8 9 10 11

vue init simulatedgreg/electron-vue my-project cd my-project npm install # OR yarn npm run dev # OR yarn dev

4. 出现以下界面及成功

img

注意事项

• npm install时候可能会由于网络原因导致包安装失败，使用cnpm或者nrm切换软件源
• npm install时候可能会遇到electron下载失败情况，有两种解决方法
  1. 在项目根目录下新建.npmrc或者.yarnrc文件，里面写入

     1	electron_mirror=http://npm.taobao.org/mirrors/electron/

  2. 在淘宝镜像下载对应系统和版本的electron包到electron缓存目录

     1	mac/win/liunx: 当前用户名/.electron/

• windows用户在npm install时候会遇到node-gyp错误，这是由于你的系统没有安装正确到构建工具，可以使用windows-build-tools一键安装所有到所需工具包

1 2 3

npm install --global windows-build-tools # OR yarn global add windows-build-tools

• npm run dev时候可能会遇到process is not defined错误，这是由于node10.X版本导致的，有两种解决方法
  1. 升级node版本到12.X
  2. 打开项目/src/index.ejs,修改!process.browser为!require('process').browser

基础入门

插件使用

插件使用和vue一样，npm/yarn直接装包就可以，脚手架自带electron-vuex可以实现主进程与渲染线程共享数据，推荐使用

css预处理器

假设我们使用less作为我们到css预先处理，需要安装less并且修改webpack配置

1. 安装

1 2 3

npm install -D less less-loader # OR yarn add -D less less-loader

2. 打开.electron-vue/webpack.renderer.config.js，在less rule里面加入less-loader

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 28

{ test: /\.less$/, use: [ { loader: "vue-style-loader" }, { loader: "css-loader", options: { importLoaders: 1 } }, { loader: "postcss-loader", }, { loader: "less-loader", options: { javascriptEnabled: true, modifyVars: { 'text-primary-color': '#293A4D', // 主要' 'text-minor-color': 'rgba(41, 58, 77, 0.45)', // 次要' 'text-highlight-color': '#1890FF' // 高亮 } } } ] }

静态资源使用

在项目根目录下的static目录，可以存放主进程和渲染进程都可以访问到的静态资源，electron-vue提供一个__static全局变量来快速访问此目录，而且开发环境和生产都可以使用。

1. vue模版使用

1 2 3 4 5 6 7 8 9 10 11 12

<template> <img v-bind:src="imageUrl"> </template> <script> export default { data () { // 注意 路径的起始是 `static/` return { imageUrl: 'static/imgs/unsplash.png' } } } </script>