electron是一个使用JS,CSS,HTML构建跨平台的桌面应用程序的框架,微软的VScode就是使用该技术开发.
环境搭建
安装node环境
由于使用的是electron-vue脚手架工具,首先要安装vuecli
1 | npm install -g @vue/cli |
- 起步
vue init
阶段会出现一些项目基本选项,按照自己需求选择就好,打包工具选择elelctron-builder
之后会用到它打包和更新
1 | vue init simulatedgreg/electron-vue my-project |
- 出现以下界面及成功
注意事项
npm install
时候可能会由于网络原因导致包安装失败,使用cnpm
或者nrm
切换软件源npm install
时候可能会遇到electron
下载失败情况,有两种解决方法- 在项目根目录下新建
.npmrc
或者.yarnrc
文件,里面写入1
electron_mirror=http://npm.taobao.org/mirrors/electron/
- 在淘宝镜像下载对应系统和版本的electron包到electron缓存目录
1
mac/win/liunx: 当前用户名/.electron/
- 在项目根目录下新建
- windows用户在
npm install
时候会遇到node-gyp
错误,这是由于你的系统没有安装正确到构建工具,可以使用windows-build-tools一键安装所有到所需工具包
1 | npm install --global windows-build-tools |
npm run dev
时候可能会遇到process is not defined
错误,这是由于node10.X版本导致的,有两种解决方法- 升级node版本到12.X
- 打开项目
/src/index.ejs
,修改!process.browser
为!require('process').browser
基础入门
插件使用
插件使用和vue一样,npm/yarn直接装包就可以,脚手架自带electron-vuex可以实现主进程与渲染线程共享数据,推荐使用
css预处理器
假设我们使用less作为我们到css预先处理,需要安装less并且修改webpack配置
- 安装
1 | npm install -D less less-loader |
- 打开
.electron-vue/webpack.renderer.config.js
,在less rule里面加入less-loader
1 | { |
静态资源使用
在项目根目录下的static
目录,可以存放主进程和渲染进程都可以访问到的静态资源,electron-vue
提供一个__static
全局变量来快速访问此目录,而且开发环境和生产都可以使用。
- vue模版使用
1 | <template> |
No comments:
Post a Comment