Vue3 仿Win10 UI 框架

文档|官网|样例

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

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

Usage

开发流程

1. 安装vue3-win10

npm install vue3-win10

2. 在vue中use插件

通过'vue3-win10'引入插件

import win10 from 'vue3-win10';

引入样式文件"vue3-win10/distlib/style.css"

import "vue3-win10/distlib/style.css"

use

import { createApp } from 'vue'
import App from './App.vue'
import win10 from 'vue3-win10';
import "vue3-win10/distlib/style.css"

createApp(App).use(win10).mount('#app')

3. 在页面中引入Win10租组件

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

一般来说，我们创建另一个文件，存放system对象

// system.ts
import { System } from "vue3-win10";
let system = new System({});
export {
  system
}

// App.vue
<Win10 :system="system"></Win10>
<script setup>
import { system } from './system'
</script>

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

4. 控制屏幕🖥大小

在组件外围包裹一个outer

  <div class="outer">
    <Win10 :system="system"></Win10>
  </div>

定义outer样式

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

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

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

感谢Star

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

Thanks

@0xgosible 贡献 @vanloswang @ObcbO意见