VUE+electron环境配置

VUE+electron环境配置

安装node.js

1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到下载页面。

2、下载完成后双击运行进行安装，安装过程基本直接“NEXT”就可以了（全部采用默认方式安装）。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）。

3、安装完成后可以使用cmd（win+r然后输入cmd进入 ）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图，出现版本提示便OK了。

5、常规NodeJS的搭建完成

搭建vue开发环境

1.安装淘宝npm镜像
由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：

npm install -g cnpm --registry=https://registry.npm.taobao.org

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；
验证是否安装成功，在命令输入vue，出来vue的信息，即说明安装成功；

搭建vue项目

使用命令创建项目，一步步选择之后开始等等项目创建完成

vue init webpack demo

完成后如下：

成功之后修改启动项，打开demo>config>index.js,具体修改如下：

执行命令 npm run dev，出现如下效果说明项目已经运行成功：

执行生成命令：

npm run build

注意： 生成的时候一定要修改index.js 中的生成路径，否则后面程序运行打包页面会显示空白，找不到路径

项目下回多出一个dist的文件夹，里面就打包好的东西：

接下来一切操作都在dist文件夹目录下

安装Electron

执行命令：

npm install electron

安装成功后执行：electron -v 查看一下是否安装成功

创建主程序的入口（main.js）,及相关配置 package.json

在dist文件夹内创建main.js文件及package.json 文件,文件内容如下：
main.js

{
  "name": "demo",
  "productName": "项目名称",
  "author": "作者",
  "version": "1.0.4",//版本号
  "main": "main.js",//主文件入口
  "description": "项目描述",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "electronVersion": "1.8.4",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "demo",//程序id
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    },
    "extraResources": [
      {
        "from": "./static/xxxx/",//需要打包的静态资源
        "to": "app-server",//静态资源存放路径
        "filter": [
          "**/*"//打包静态资源文件夹内的所有文件  如果没有静态资源要打包进去，extraResources 这段代码去掉
        ]
      }
    ],
    "publish": [
      {
        "provider": "generic",
        "url": "http://xxxxx/download/"//自动更新的安装包地址，初步使用publish这段代码不需要
      }
    ]
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "electron-packager": "^12.1.0",//不打包成exe程序可以去掉
    "electron-updater": "^2.22.1",//不打包成exe程序可以去掉
  }
}

package.json更多配置可查看官方文档：https://www.electron.build/configuration/configuration

执行命令： electron .

成功后效果如下：

打包成桌面可执行程序

执行命令

 npm install electron-builder

 npm install electron-packager

执行打包命令：

electron-packager ./ test --platform=win32 --out=release --arch=ia32 --overwrite

dist → release → test.exe即为可执行桌面程序