vtron, 基于Vue3的 Win10 UI 框架
推荐 Vue 3 + Typescript + Vite + Using <script setup>
English | 中文
本框架可以让你的页面像win10视窗系统一样，运行一个网页上的win10系统。
文件系统：可以上传文件预览显示编辑。长时间保存。
终端系统：终端控制文件。
js执行：保存的js文件可以执行。
软件商店：下载的软件可以长时间保存。
开发时插件机制，控制system的状态。
qq群：712921211
从这个模版仓库创建新的项目。
- clone项目
git clone 已经创建好的项目
- 修改apps目录下的文件，或者新建app
- 安装vtron
npm install vtron
- 在vue中use插件
import vtron from 'vtron';引入样式文件"vtron/distlib/style.css"
import 'vtron/distlib/style.css';usage
import { createApp } from 'vue';
import App from './App.vue';
import vtron from 'vtron';
import 'vtron/distlib/style.css';
createApp(App).use(vtron).mount('#app');- 在页面中引入Screen组件
首先，我们需要创建一个system对象，这个对象管理着系统的所有状态信息。
// App.vue
<Screen></Screen>
<script setup>
import { System } from 'vtron';
let system = new System();
</script>此步骤之后，run dev已经可以看到win10启动了
- 控制屏幕🖥大小
在组件外围包裹一个outer
<div class="outer">
<Screen></Screen>
</div>定义outer样式
<style scoped>
.outer {
width: 100vw;
height: 100vh;
}
</style>这样就是占据全部页面显示
- 在apps文件夹下新建vue文件，主要在此文件夹中编写窗口内容（非必须）
<template>
<div class="app">
<h1>HelloWorld</h1>
</div>
</template>- 在system中注册app
在system的构造函数传入配置项，
其中 desktop是桌面的配置项，可以配置多个app
如果新加了app，而桌面没有显示，请点击 开始->电源->恢复
进行系统的刷新
<Screen></Screen>
<script setup>
import { System, BrowserWindow } from 'vtron';
import { App } from './apps/App.vue';
import someicon from './assets/someicon.png';
import HelloWorld from './apps/HelloWorld.vue';
let system = new System({
desktop: [
{
name: 'HelloWorld',
icon: someicon,
window: {
content: HelloWorld,
icon: someicon,
},
},
],
});
</script>想改哪里都行，欢迎pr
项目是monorepo项目，
包含多个子项目，存在于packages下，每个文件夹是一个子项目。
vtron: 核心项目，包含核心逻辑，vtronjs包。
vtron-demo: demo项目，也是线上vtron.site/win的项目。
vtron-e2e: e2e测试监控项目。
vtron-md: 文档项目，指线上v3w10.vtron.site。
vtron-plus: plus插件，包含了部分占用体积的附加功能。
vtron-store: 应用商店，线上应用商店打开时的内嵌网页，可以与vtron框架交互，提供应用安装功能。
首先安装所有依赖，建议使用pnpm。
pnpm i安装依赖之后，启动对应子项目，
对于vtron 项目，运行：
pnpm vtron dev对于plus项目，运行：
pnpm plus dev对于demo项目，运行：
pnpm demo dev对于md项目，运行：
pnpm md dev对于shop项目，运行：
pnpm shop dev对于e2e项目，运行：
pnpm e2e dev欢迎PR，意见，想法，感谢各位大佬的支持
我们需要帮助：
目前需要帮助的方向：
文档建设
更加完善的功能：向更加完善的webOS迈进
碎碎念：参见 Next.md
