脚本宝典收集整理的这篇文章主要介绍了基于 Vue & Koa 的 WebDesktop 视窗系统，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

X-WebDesktop 中文文档

介绍

X-WebDesktop 是一个基于 Vue && Koa 的仿 Microsoft Windows 风格的 PC 网站。

在线预览

Url：http://47.93.49.248/X-WebDesktop-Vue/

Account：admin

Password：123456

Screenshot

更新日志

最新稳定版本：2.0.0

FrontEnd	API
3.x	3.x
2.0.0	2.0.0
1.0.1	1.0.1
1.0.0	-

起步

在你开始阅读以下章节时，官方指南假设你已了解 Vue 和 Koa 相关生态的知识点，并有一定的实际项目经验。如果你还不是很了解请先阅读 Vue && Koa 相关的文档。

本地运行

1.clone 前端工程

git clone https://github.com/OXOYO/X-WebDesktop-Vue.git

1.1.安装依赖

npm i

1.2.运行开发环境

npm run dev
> Starting dev server...
> Listening at http://localhost:8899

2.clone API工程

git clone https://github.com/OXOYO/X-WebDesktop-Api-Koa.git

2.1.安装依赖

npm i

2.2.导入数据库文件

Import the "X-WebDesktop-Api-Koa/src/sql/x-webdesktop-v2.sql" file into the database;

2.3.运行开发环境

npm run dev
> Starting dev server...
> x-webdesktop-api is listening to http://localhost:3000

前端架构

技术栈

vue-cli       脚手架

Vue           核心框架
vue-router    路由
vuex          状态管理
iview         UI库
axios         Ajax库
animate.css   动画库

webpack       工程化

项目结构

  _ build                      // webpack配置
  _ config                     // webpack配置
  _ dist                       // 打包输出目录
  _ docs                       // gh_pages文件目录
  _ document                   // 文档
  _ src                        // 源码
    _ apps                     // 【自开发应用】
      _ DemoApp                // 【DemoApp】应用
        _ components           // 组件
        _ containers           // 容器
        _ pages                // 页面
        _ install              // 自定义应用安装界面
          _ Index.vue          // 自定义应用安装界面入口
        _ uninstall            // 自定义应用卸载界面
          _ Index.vue          // 自定义应用卸载界面入口
        _ store                // Store
          _ index.js           // Store入口
          _ actions.js         // action定义
          _ mutations.js       // mutation定义
          _ state.js           // state定义
        _ api.js               // 接口
        _ config.js            // 配置文件
        _ Index.vue            // 应用入口文件
        _ openApi.js           // 对外接口【暂无意义】
        _ contextMenu.js       // 右键菜单配置【暂无意义】
    _ global                   // 【全局公用】目录
      _ components             // 公用组件
      _ directives             // 公用指令
      _ plugin                 // 公用插件
      _ utils                  // 公用工具
    _ platform                 // 【平台】
      _ apps                   // 平台默认应用
        _ Admin                // 后台容器
          _ components         // 组件
          _ containers         // 容器
          _ pages              // 页面
          _ store              // Store
          _ api.js             // 接口
          _ config.js          // 配置文件
          _ Index.vue          // 入口组件
          _ openApi.js         // 对外接口
          _ contextMenu.js     // 右键菜单配置
        _ ContextMenu          // 右键菜单
        _ Desktop              // 桌面
        _ DesktopIcon          // 桌面图标
        _ DekstopWidget        // 桌面控件
        _ Home                 // 前台容器
        _ Login                // 前台登录
        _ StartMenu            // 开始菜单
        _ TaskBar              // 任务栏
        _ TaskBarIcon          // 任务栏图标
        _ TaskBarWidget        // 任务栏控件
        _ Window               // 应用窗口
      _ store                  // 平台Store
      _ config.js              // 平台配置
      _ Index.vue              // 平台入口文件
    _ App.vue                  // 根入口组件
    _ config.js                // 根配置信息
    _ main.js                  // 根入口js
    _ routers.js               // 根路由js
  _ static                     // 静态文件目录
  _ index.html                 // 根入口html

API架构

技术栈

Koa               核心框架
koa-router        路由中间件
koa-cors          跨域中间件
axios             Ajax库
jsonwebtoken      JsonWebToken
log4js            日志输出
mysql2            数据库
sequelize         数据库ORM

gulp              工程化
pm2               进程管理

项目结构

  _ assets                   // 静态文件目录
  _ build                    // 打包脚本
  _ dist                     // 打包输出目录
  _ logs                     // 日志输出目录
  _ src                      // 源码
    _ apps                   // 【应用】对应接口目录
      _ AccountManagement    // 【账号管理】应用
        _ Ctrl.js            // 控制器
        _ Model.js           // 模型
        _ Routers.js         // 路由
      _ ApplicationMarket    // 【应用市场】应用
        _ Ctrl.js            // 控制器
        _ Model.js           // 模型
        _ Routers.js         // 路由
      _ MyApplication        // 【我的应用】应用
        _ Ctrl.js            // 控制器
        _ Model.js           // 模型
        _ Routers.js         // 路由
      _ PersonalCenter       // 【个人中心】应用
        _ Ctrl.js            // 控制器
        _ Model.js           // 模型
        _ Routers.js         // 路由
    _ middleware             // 中间件
    _ schema                 // 数据库模型
    _ platform               // 【平台】基础接口目录
      _ Ctrl.js              // 控制器
      _ Model.js             // 模型
      _ Routers.js           // 路由
    _ sql                    // 备份SQL文件
    _ utils                  // 全局工具
    _ api.js                 // 封装提供给前端的API
    _ auth.js                // 鉴权
    _ config.js              // 全局配置
    _ db.js                  // 数据库实例
    _ routers.js             // 封装应用路由表
  _ ecosystem.config.js      // PM2配置
  _ gulpfile.js              // gulp任务脚本

脚本宝典总结

以上是脚本宝典为你收集整理的基于 Vue & Koa 的 WebDesktop 视窗系统全部内容，希望文章能够帮你解决基于 Vue & Koa 的 WebDesktop 视窗系统所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。