nimeinimei/vtron

基于Vue3的win10风格的UI框架,Win10 Style Frontend Framework built with Vue3.模仿windows10的vue3框架. windows10 in vue3

vtron, 基于Vue3的 Win10 UI 框架

文档|官网|样例

推荐 Vue 3 + Typescript + Vite + Using <script setup>

English | 中文

本框架可以让你的页面像win10视窗系统一样，运行一个网页上的win10系统。

项目相关讨论可以在Discussions中

开发流程

使用Github模版

1. 创建项目 https://github.com/royalknight56/vtron-template

从这个模版仓库创建新的项目。

2. clone项目

git clone 已经创建好的项目

3. 修改apps目录下的文件，或者新建app

使用npm，从创建好的vue项目开始

1. 安装vtron

npm install vtron

2. 在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');

3. 在页面中引入Screen组件

首先，我们需要创建一个system对象，这个对象管理着系统的所有状态信息。

// App.vue
<Screen></Screen>
<script setup>
import { System } from 'vtron';
let system = new System();
</script>

此步骤之后，run dev已经可以看到win10启动了

4. 控制屏幕🖥大小

在组件外围包裹一个outer

<div class="outer">
    <Screen></Screen>
  </div>

定义outer样式

<style scoped>
  .outer {
    width: 100vw;
    height: 100vh;
  }
</style>

这样就是占据全部页面显示

4. 在apps文件夹下新建vue文件，主要在此文件夹中编写窗口内容（非必须）

<template>
  <div class="app">
    <h1>HelloWorld</h1>
  </div>
</template>

5. 在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>

感谢Star

欢迎PR，意见，想法，感谢各位大佬的支持

需要的帮助

我们需要帮助：

目前需要帮助的方向：

文档建设

更加完善的功能：向更加完善的webOS迈进

Thanks