# vue-electron

**Repository Path**: yangke02/vue-electron

## Basic Information

- **Project Name**: vue-electron
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-08
- **Last Updated**: 2026-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用说明
该库可以创建pywebview框架的项目。前端使用了ts+vue+tailwindcss 4.1.18。
## 安装
> pnpm install --global ykvue@latest

## 使用方法
使用如下命令创建项目，project-name替换为自定义名称。
> ykvue create project-name

例如
```angular2html
PS C:\Users\wysun\PycharmProjects\gravity\ai> ykvue create test

? Choose a template (Use arrow keys)
>  pywebview-vue-template
   vue-electron-template
```
选择pywebview-vue-template即可，目前vue-electron-template没有维护。

创建项目后，进入项目目录，依次执行：
```angular2html
pnpm install
pnpm app   // 运行桌面版
pnpm dev   // 运行网页版
```
`pnpm app`命令以桌面应用的形式运行软件。如果需要使用网页版，则执行：`pnpm dev`。桌面版的运行结果如下：

![img.png](img.png)
网页版运行结果与桌面版几乎一样，但是桌面版多了python后端的一些功能，该项目中已经集成了python后端。只是
以网页版运行时，无法使用python后端功能，网页版运行时会尽量使用前端的替代功能，如：
1. 打开本地文件功能
如果是桌面应用版，则使用python的打开文件功能，可以直接读取本地文件路径和内容。而网页版无法获取文件路径，
但可以以上传的方式获取文件内容。
2. 保存文件功能
桌面版会使用python的保存文件功能，保存文件。网页版无法保存文件，只能以网页模式下载文件内容，保存到本地。

该pywebview-vue-template集成了登录功能，用户可直接注册账号登录使用。后台的登录和注册服务器地址和端口可通过如下方法配置：
```typescript
import {useYklibLoginStore} from 'yklib'
import {storeToRefs} from 'pinia'

const store = useYklibLoginStore()
store.serverHost = 'your_host_ip_or_domain' // 你的登录注册服务器地址
store.serverPort = 'your_server_port' // 你的登录注册服务器端口
```

该pywebview-vue-template集成了注册和登录功能，用户可直接注册账号登录使用。登录后界面如下图所示：

![img_1.png](img_1.png)
界面上有【打开终端抽屉】、【终端测试】、【Python终端测试】、【设置任务栏信息】和【Python设置任务栏信息】按钮。
可以实现相应的功能。

打开终端抽屉会在页面中打开一个终端。

软件中前后端均可以使用printToTerminal(msg, level)方式在终端中打印信息。

使用setTaskBar(title, progress)设置任务栏信息，progress为0-100，0为无进度，100为完成。具体方法为：


### 前端使用集成的方法：
在任何自定义的*.vue组件中，注入方法后使用，如下示例：
```typescript
import { inject } from "vue";

const printToTerm = inject('printToTerm') as (msg: string, level: 'info' | 'error' | 'warn' | 'command' | 'debug') => void; // 注入printToTerm方法，供子组件使用
const setTaskBar = inject('setTaskBar') as (text: string, progress: number) => void; // 注入setTaskBar方法，供子组件使用
const openDrawer = inject('openDrawer') as () => void; // 注入openDrawer方法，供子组件使用
```

### 后端使用集成方法：
```python
from YkPywebview import YkWebviewApi, start


class Api(YkWebviewApi):
    def __init__(self) -> None:
        super().__init__()
        
    def 使用示例(self):
        self.printToTerm("终端输出信息", "debug") # 第二个参数可选，为日志级别 
        self.setTaskBar("任务栏设置信息", progress=40) # progress为可选参数，为进度条的值
        self.openTerminal()  # 打开终端抽屉


if __name__ == '__main__':
    start(Api, url='./dist/index.html', debug=True)
```
下图是终端输出结果：
![img_2.png](img_2.png)
下图是设置任务栏状态的效果：
![img_3.png](img_3.png)

软件内置了保存和加载项目功能，默认项目保存文件为settings.project.toml。前后端使用方法分别为：
### 前端使用方法（任意组件中）：
```typescript
import { useYklibLoginStore } from 'yklib'
import {storeToRefs} from 'pinia'

const store = useYklibLoginStore()
const {isPywebview} = storeToRefs(store) // isPywebview为是否为pywebview环境，网页版运行该值为false
await store.loadAppSettings() // 加载应用设置，该函数一般使用不上，保存应用界面的大小和位置等信息
const project = await store.loadProjectSettings() // 加载项目文件
await store.saveProjectSettings({ par1: '参数1的值', par2: '参数2的值'}) // 保存项目文件
```
### 后端使用方法（Api(YkWebviewApi)类中）：
```python
from YkPywebview import YkWebviewApi, start


class Api(YkWebviewApi):
    def __init__(self) -> None:
        super().__init__()
        self.project = self.loadProjectSettings()  # 加载默认的项目文件
        self.saveProjectSettings({'par1': '参数1的值', 'par2': '参数2的值'})  # 保存当前项目到默认的项目文件，也可传入project的部分参数，该方法会合并传入的参数和当前的self.project字典


if __name__ == '__main__':
    start(Api, url='./dist/index.html', debug=True)
```

#