Electron-vue项目构建

    最近项目要做一个桌面应用，因为之前也是没有做过桌面应用，所以写下笔记记录一下问题。希望能帮助到有需要的人。话不多说，直接上干货。

目前做桌面应用被大家考虑的有两个工具，NW.js和Electron。因为分析之后NW.js优点不少，比如可以支持XP；缺点是卡顿，打包比较大等。Electron有很多成熟的项目例如Visual Studio Code、Slack等相较NW.js更稳定，支持多平台包括了桌面端，Web端，移动端。我们最后选择的Electron进行开发。具体对比可参考：Electron和NW.js优缺点对比分析。

需要环境

    当然说到vue，node是必不可少的，这两个安装完毕，就可以开始写项目了。

安装步骤

    1.安装vue的脚手架

         npm install -g vue-cli

    2.创建一个electron-vue的项目

        vue init simulatedgreg/electron-vue my-project

创建electron-vue项目

创建electron-vue项目

        这里可能会出现vue : 无法加载文件 C:\Users\xxxx\AppData\Roaming\npm\vue.，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/ go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + vue init simulatedgreg/electron-vue my-v

vue init simulatedgreg/electron-vue my-project  报错

vue init simulatedgreg/electron-vue my-project  报错

        解决方案：

           1. 打开 powerShell 用管理员身份运行

            2.输入命令： set-ExecutionPolicy RemoteSigned 

            3.输入A

    3.进入项目目录

        cd my-project

    4.安装依赖

        npm i

     5.启动项目

        npm run dev

启动成功

启动成功

        6.项目结构

项目结构

项目结构

                .electron-vue：webpack和electron的一些配置

                build:项目打包后的文件

                src：里面有两个文件夹

src里的文件

src里的文件

               main：electron的主进程文件在里面配置

                renderer：是vue的代码文件，按vue的实现方法写就可以

            7.打包

                electron-vue有内置的打包，执行 npm run build就可以。每次重新打包前，执行一下npm run build:clean 清除之前打包的代码，在执行打包。不报错，就说明打包完成，点击build文件下的.exe文件，看下效果：

打包后运行的项目

打包后运行的项目

    希望可以帮助到你，大家一起进步。