# electron-vue2

**Repository Path**: tpflyfly/electron-vue2

## Basic Information

- **Project Name**: electron-vue2
- **Description**: 创建桌面应用程序 electron + vue2
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-09-27
- **Last Updated**: 2024-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Vue2
### Project setup
```
npm install
> 报错的话就安装cnpm，使用命令：cnpm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

## 创建桌面应用程序

### [一、Electron + Vue 创建项目实际上相当于：创建Vue项目 + Electron封装](https://www.cnblogs.com/donghuang/p/12297148.html)

> 对vue项目执行命令：npm run build 打包项目，项目打包完成以后会在项目文件夹内自动新建一个 dist文件夹。  
> 到这一步为止，Vue这边的操作已经完成，下面进入 dist文件夹开始 Electron 封装。

#### 进入dist文件夹，进行Electron封装
1. 在 dist 文件夹内 创建主程序入口`main.js`和配置文件`package.json`
- **main.js**

```text
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**
```text
{
    "name": "electron-vue",
    "version": "1.0.0",
    "description": "electron-vue",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "package": "electron-packager . electron-vue --win --out electron-vue --arch=x64 --electron-version=7.1.9"
    },
    "author": "",
    "private": true
}
```
2. 本地安装electron，然后安装项目依赖包
```text
npm install --save-dev electron 或 cnpm install --save-dev electron
npm install 或 cnpm install
```
3. 执行启动命令：npm start，就可以启动Electron + Vue项目了。
```text
npm start
```

### [二、搭建Electron-Vue前端桌面应用](https://blog.csdn.net/aDiaoYa_/article/details/130307349)
1. 进入创建好的 vue 项目中
2. 安装 electron `cnpm i electron -S`
3. 配置`package.json`文件和`main.js`文件
4. 启动 vue 项目 `npm run serve`
5. 启动 electron 项目 `npm run electron:serve`
6. 打包(`.exe`安装包)`npm run electron:build`

> #### 本项目开发环境版本  
> - Node：`v20.17.0`
> - Npm：`10.9.0`
> - Vue CLI：`@vue/cli 5.0.8`
> - Electron：`^32.1.2`

# 号外（参考）
- https://gitee.com/ren-haohan/base.git (来自gitee作者<@ren-haohan>的《初始化的vue2项目》)
- [Git迁移新仓库并保存历史提交记录](https://blog.csdn.net/weixin_48616345/article/details/133758262)
- [在electron-vue项目引用element UI](https://juejin.cn/post/6844903908549066766)
> 1. 安装loader 模块 `npm install style-loader css-loader file-loader --sava-dev`
> 2. 安装 Element-UI 模块 `npm install element-ui --save`
> 3. 在渲染进程入口文件引入ElementUI 
>  ```vue
>  import ElementUI from 'element-ui'
>  import 'element-ui/lib/theme-chalk/index.css'
>  Vue.use(ElementUI)
>  ```