Total Pageviews

Monday 29 July 2024

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
  1. 起步

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
  1. 出现以下界面及成功

img

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
  1. 打开.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>

No comments:

Post a Comment