# vue-app

**Repository Path**: coder128/vue-app

## Basic Information

- **Project Name**: vue-app
- **Description**: 一个基于可以使用vue的electron桌面程序
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-19
- **Last Updated**: 2022-10-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-app
很多electron项目从搭建到运行是比较耗时的，这个项目很小，基于electron + webpack5 + typescript + vue 搭建的一个桌面端开发环境，让vue可以直接调用nodejs代码，省掉了大量的配置时间，直接拉取下去install就可以用了
目前vue2支持的库是最多的，考虑到某些项目用到vue2的库，vue2和vue3是不兼容的，因此这个项目直接采用vue2框架


## 安装
安装很简单，直接执行yarn或者npm的``install``命令即可，以npm为例子，默认使用的npmjs的源，如果嫌速度慢可以使用淘宝镜像  ``shell: npm config set registry https://registry.npm.taobao.org/``
```shell
npm install
```
> 这样耐心等待安装完成即可

## 目录结构
在目录结构里的内容可以根据自己的喜好自定义，但别引入错误哦
```javascript
    dist // 打包输出目录，render 运行的文件就是基于这个目录
    output // 输出打包后的文件夹
    src // 源代码文件夹，负责整个业务的编写
    - render // render 的专属目录，这个可以放render 相关的东西
    - assets // 图片，字体，视频等静态资源存储目录
    - components // vue的组件目录
    - views // vue的页面目录
    - store // vuex的目录
    - public // 目前存储index.html的目录 专门存储公开文件的文件夹，也可以存公共代码
    - router // 存储vue-router的目录
    - addons // 扩展代码的目录，大部分的时候，放三方小模块
    - App.vue // vue主入口组件
    - main.ts // vue的主入口js
```

## 概念
electron是和这个结构差不多的，这边概念和官网也是差别不大，感兴趣可以去官网看看，下文来介绍概念
### 主进程
一个程序只有一个主进程，因此主进程约定在 ``src/render/main.ts``

### 渲染器进程
每个在``src/render``目录外的程序被称为渲染线程，他是负责处理页面逻辑的

### 预加载脚本​
在 ``src/render/preload.ts``是预加载脚本，在这个文件中也可以引入其他文件来达到扩展的目的

## electron速度慢问题
因为electron要下载编译环境，服务器也是外国的，所以中国访问速度是很慢的，甚至很大时候可能不成功，这样就需要下面的安装方式了(这个在官网也有说明) ，这边推荐淘宝镜像 ``ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"`` 官网链接： [https://www.electronjs.org/zh/docs/latest/tutorial/installation](https://www.electronjs.org/zh/docs/latest/tutorial/installation)
```shell
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/
npm install
```

## electron-builder打包
需要安装electron-builde，并且注意node版本，不能太低，测试用的是16，你可以全局安装，不过这个程序下载一般地址都在国外，因此需要配置``ELECTRON_BUILDER_BINARIES_MIRROR``如下
```shell
npm config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/
```
也可以直接设置环境变量。默认使用nsis作为安装引导，你可以参考官网的配置来达到自定义的效果 [https://www.electron.build/](https://www.electron.build/)
## 运行
运行很简单，如果想看更多命令可以在``package.json``内查看
```shell
# 首先进行webpack打包，在参数后面加个 -s 这样文件变化会自动打包，速度更快
node setup.js
```
之后直接会弹出一个程序窗口，代表以及搭建成功
## 多个js打包
如果想打包多个js，可以在``config/webpack.config.js``的``entry``里自己新建一个一个入口，与上面的一致，添加完成就可以直接运行了

## 打包应用程序
本应用提供了快捷打包的命令，使用``node setup.js``可以实现快速打包编译，具体可以输入``--help``进行查看