安装Electro，并Electro-vue+element-ui的项目，开始第一个应用并打包

最新推荐文章于 2024-05-05 03:54:38 发布

我就是DaLing呀！

最新推荐文章于 2024-05-05 03:54:38 发布

阅读量810

点赞数

本文链接：https://blog.csdn.net/weixin_42418774/article/details/108482230

版权

1.搭建环境

安装node.js(最新版）

用node -v 命令来查看版本，不是最新版就到官网去下载一个最新版，它会覆盖旧版本

官网：https://nodejs.org/en/download/

2.开始安装

创建一个空的文件夹，在您的app所在文件夹中运行下面的命令：（会得到一个package.json文件）

npm init

npm install --save-dev electron   //安装命令，会得到node_modules这个文件

如果安装命令一直停留在一个地方时，请用淘宝镜像来安装，也就是cnpm，就会成功如下图：

成功后，可以在编辑器内打开目录，目录如下图：

3.编辑文件，开始编译

创建main.js和index.html后开始编写文档。

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <h1>Hello World!</h1>
		    We are using node <script>document.write(process.versions.node)</script>,
		    Chrome <script>document.write(process.versions.chrome)</script>,
		    and Electron <script>document.write(process.versions.electron)</script>.
	</body>
</html>

package.json

{
  "name": "twoelectron",
  "version": "1.0.0",
  "description": "this is a electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.1"
  }
}

把以上三个文件初步编写一下就可以运行了。

运行命令：

npm start

运行后就是这样：

安装vue+element-ui+electron的项目！！！

方法一：通过vue-cli-plugin-electron-builder这个来安装vue+element-ui+electron的项目！！

网址说明：https://nklayman.github.io/vue-cli-plugin-electron-builder/

1.首先安装配置一个vue的项目环境出来

扩展：提供淘宝镜像：npm install cnpm -g --registry=http://registry.npm.taobao.org

 cnpm install –g @vue/cli    //安装vue-cli3或者vue-cli4

vue create project-name  //创建vue项目
cd project-name
npm run electron:serve

在浏览器运行出来了，如下图：

2.安装electron-builder

可以先安装 cnpm install --save-dev electron-chromedriver

vue add electron-builder  //可能会慢，注意网络

安装成功后，运行  npm run electron:serve

还要配置一下，不然就还是在浏览器上看到

这样子就可以了，就会弹出窗体。

如下图：

3.再安装element-ui

可以去博客里面查看，这里不做介绍了！！！

https://blog.csdn.net/weixin_42418774/article/details/102799361

方法二：使用electron-vue来实现vue+electron+element-ui项目建议直接用这个！！！

打开命令窗口，先安装vue-cli，要版本3或者4

 cnpm install –g @vue/cli    //安装vue-cli3或者vue-cli4

vue init simulatedgreg/electron-vue my-project    
// my-project 你项目名称

再进入创建的文件夹下面安装依赖：

可能这一步过程会比较久，注意网络。

可以用cnpm install会快点！！！

完成后就可以运行了

npm run dev

如下图所示：

这时候虽然可以了，但是可以看见界面是由问题的，所以这里需要修改一下文件：

参考这个文章：

https://www.jianshu.com/p/352f1f9fdd8d

两个文件都修改一样的地方，添加一段代码：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {   //从这里开始
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

最后如图：（可能这里是有很多东西的，但是我这边注释了）

最后，最重要的就是打包，构建项目好后，就可以直接运行npm run build !!!!

如果报以下错误：

然后上网查了以下，说重新安装依赖，npm install，但是却报错了，我就安装了yarn

一次不行，就多运行 yarn install命令就可以了，然后运行打包命令，还是报错了

我查了一下，我就在package.json中加了这个

 最后在打包一下：yarn run build

成功后文件下面：

双击就好了！

我就是DaLing呀！

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
安装Electro，并Electro-vue+element-ui的项目，开始第一个应用并打包

1.搭建环境安装node.js(最新版）用node -v 命令来查看版本，不是最新版就到官网去下载一个最新版，它会覆盖旧版本官网：https://nodejs.org/en/download/2.开始安装创建一个空的文件夹，在您的app所在文件夹中运行下面的命令：（会得到一个package.json文件）npm initnpm install --save-dev electron //安装命令，会得到node_modules这个文件如果安装命令一直停留在一...
复制链接

扫一扫