Electron+vue框架搭建

1.什么是Electron？

建立在 Chromium 和 Node.js 之上的跨平台的桌面应用开发框架，Node.js赋予了它调用系统底层API的能力，Chromium引擎可以让我们以开发WEB应用的方式实现页面的渲染，参见 开始入坑 Electron 了，香！-技术圈‍作为一个跨平台的桌面应用开发框架，Electron 的迷人之处在于，它是建立在 Chromium 和 Node.js 之上的 —— 二位分工明确，https://jishuin.proginn.com/p/763bfbd5cd37Electron官网：Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

2.搭建环境

        2.1安装nodejs（nodejs官网）

        下载安装包后全部采用默认方式安装

        进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功

        新版的NodeJS已经集成了npm，所以之前npm也一并安装好了

node -v        显示安装的nodejs版本
npm -v         显示安装的npm版本

        由于npm的服务器在海外，所以访问速度比较慢，访问不稳定 ，需要更换npm源，有两种方式，一种为直接使用npm命令切换，一种为使用nrm工具管理源

      方式一：

• 查看初始npm源
• 更换为淘宝镜像

npm config get registry  
npm config set registry https://registry.npm.taobao.org/

     方式二：

• 安装nrm
• 查看npm源列表
• 添加新的npm源 
• 切换源

npm install -g nrm
nrm ls
nrm add malongNpm https://npm.malong360.top/
nrm use malongNpm

       2.2搭建vue项目 （vue官网）

      全局安装@vue/cli模块包

npm install -g @vue/cli
npm i -g @vue/cli-init

      使用命令创建项目

vue create 项目名

      选择vue版本

    执行命令，出现如下页面说明项目已经运行成功

npm run serve

       2.3安装Electron （electron官网）

       使用electron支持插件 vue-cli-plugin-electron-builder创建Electron项目

vue add electron-builder

    成功后效果如下

      执行命令启动项目，APP页面如下

npm run electron:serve

 

        2.4打包

        执行命令

npm run electron:build

  除此之外，还可以使用vue-cli脚手架工具来创建项目

npm i -g @vue/cli-init
vue init simulatedgreg/electron-vue 项目名

打包时可能会遇到一些错误，参见

electron-vue 执行npm run build无法打包 提示 Identifier 'tasks' has already been declared解决方案