Electron-vue 安装步骤

.现如今前端框架数不胜数,尤其是angular、vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用。接下来是介绍electron+vue的结合使用。

2.Electron是什么??

     对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象,可以构建跨平台桌面程序,本身支持node.js,可以使用node.js的一些模块。想要深入了解可以查看官网的详细介绍。

    Electron官网:Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.  

3.Electron+vue的联合使用

    有vue基础跟nodejs基础的开发人员使用electron那就更顺风顺水了,没有node基础的,有vue或者angular基础的也可以学习,学起来可能会吃力些,不过也没关系,很多东西有大神已经封装好了,直接使用就行。

    接下来教你手把手搭建一个electron+vue的开发环境。

    第一步:安装nodejs

    windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(Node.js),便可以看到下载页面。 

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的搭建到现在为止已经完成了,急不及待的话你可以在”cmd“输入”node“进入node开发模式下,输入你的NodeJS第一句:”hello world“ - 输入:console.log(‘hello world’)。

 

 第二步:搭建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项目

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

1

$  vue init webpack demo

完成后如下:

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

    执行命令,出现如下效果说明项目已经运行成功:

1

$  npm run dev

  

执行生成命令:

$ npm run build

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

出现如下效果

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

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

第四步:安装Electron

执行命令:

1

$ npm install electron

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

第五步:创建主程序的入口(main.js),及相关配置 package.json

在dist文件夹内创建main.js文件及package.json 文件

文件内容如下:

main.js

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

const {app, BrowserWindow} =require('electron');//引入electron

let win;

let windowConfig = {

  width:800,

  height:600

};//窗口配置程序运行窗口的大小

function createWindow(){

  win = new BrowserWindow(windowConfig);//创建一个窗口

  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html

  win.webContents.openDevTools();  //开启调试工具

  win.on('close',() => {

    //回收BrowserWindow对象

    win = null;

  });

  win.on('resize',() => {

    win.reload();

  })

}

app.on('ready',createWindow);

app.on('window-all-closed',() => {

  app.quit();

});

app.on('activate',() => {

  if(win == null){

    createWindow();

  }

});

 以上是最基本的代码,更复杂的可以自行设计,也可以看官方文档

package.json

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

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

{

  "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更多配置可查看官方文档:Common Configuration - electron-builder

 现在万事俱备只欠东风,

执行命令: electron .

 

成功后效果如下:

出现如上效果说明你已经成功了。

第五步:打包成软件包

执行命令

$ npm install electron-builder

$ npm install electron-package

 

执行打包命令:

electron-bulider

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
### 回答1: electron-vue 是一个使用 Vue.js 开发跨平台桌面应用的框架,可以使用 electron-builder 工具将其打包成 exe 文件。 以下是将 electron-vue 项目打包成 exe 的基本步骤: 1. 安装 electron-builder 在 electron-vue 项目的根目录下执行以下命令: ``` npm install electron-builder --save-dev ``` 2. 配置打包参数 在项目根目录下创建一个 electron-builder.json 文件,用于配置打包参数。可以参考 electron-builder 的文档进行配置,主要包括应用程序名称、版本号、图标等。 3. 执行打包命令 在项目根目录下执行以下命令进行打包: ``` npm run build:win ``` 该命令会生成一个 dist 目录,其中包含打包后的应用程序和安装程序,可以在 Windows 上运行。 以上就是将 electron-vue 项目打包成 exe 的基本步骤,希望对你有帮助。 ### 回答2: electron-vue 是基于 Vue.jsElectron 的开发框架,可以快速构建桌面应用程序。在开发完成后,开发者需要将其打包成 .exe 格式(Windows 可执行文件),以便部署和发布。 以下是将 electron-vue 项目打包成 .exe 文件的步骤: 1. 准备工作 首先要安装 electron-packager 包,这个包可以让我们快速打包 electron 应用程序。可以在终端中输入以下命令进行安装: npm install electron-packager --save-dev 2. 修改 package.json 文件 在 package.json 文件中,需要添加以下代码: "scripts": { "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist --ignore=dist --overwrite" } 这个代码段是一个命令,运行它可以将项目打包成指定平台(这里是 win32,也就是 Windows)的可执行文件,以 .exe 格式输出到指定目录(这里是 dist 文件夹)。其中,--icon 表示程序图标,--ignore 是忽略打包的文件夹,--overwrite 表示覆盖已有的输出文件夹。 3. 执行打包命令 在终端中输入以下命令,即可开始打包: npm run package 然后等待一段时间,打包成功之后会在 dist 目录下生成 .exe 文件。 4. 发布 最后将 .exe 文件上传到合适的平台(例如 GitHub Release),这样用户就可以下载并使用了。 注意事项: - 在打包时需要注意修改 .ico 图标文件的路径,确保能正确找到。 - 若需要打包成其他平台的可执行文件,可以修改 --platform 和 --arch 参数。 - 打包时,如果报错了,可以在命令行加上 --verbose 参数,查看具体错误信息。 ### 回答3: electron-vue是一个基于vue.js构建的 electron框架的项目,可以让开发者快速地构建跨操作系统的桌面应用程序,并且electron-vue项目也非常容易打包成exe可执行文件,便于在Windows平台上使用。 打包electron-vue项目成exe的方法: 首先要在命令行中进入项目根目录, 然后运行: npm run build 或 yarn run build 这两个命令将会编译和打包electron-vue项目,生成一个dist目录。 在默认情况下,打包出的exe应用程序是没有图标的,如果需要添加图标,需要在build目录下找到win下的icon.ico文件,并替换成你自己的图标文件。 接下来,需要使用第三方的打包工具,如electron-builder,打包成exe文件,命令如下: npm run dist 或 yarn run dist 执行完这个命令后,就会在dist目录下生成一个installer目录,里面包含着生成的exe文件和其他必要的文件。 理论上,exe应用程序已经可以在Windows平台上使用了。 总结: electron-vue项目打包成exe并不是一件复杂的事情。只需进入项目根目录运行 npm run build 命令,然后使用第三方打包工具electron-builder打包,就可以生成一个可执行的exe文件了,这样就极大地方便了开发者在Windows平台上部署应用程序。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值