类Windows界面的前端项目，基于TypeScript、Vue、ViewUI开发

最新推荐文章于 2024-07-22 10:34:10 发布
最新推荐文章于 2024-07-22 10:34:10 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： typescript 文章标签： typescript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tq26556570/article/details/107447240
版权

文章目录

heart-front-end

简介

heart-front-end是一个类Windows界面的前端项目，基于Vue 2.x + TypeScript + ViewUI(IView 4.x) + Sass开发，由于公司要求，后端暂时对应的是Jeesite的规范，如果想要对接其他后端就要做一些修改哦。
这个项目使用了TypeScript，引入了面向对象和面向接口编程的思想，易于扩展，可以做出各种好玩的东西，喜欢的尽管拿去用吧，我也是刚刚入门，所以肯定会存在不少问题，如果发现有不爽的地方记得告诉我哦_

代码传送门

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

安装依赖

yarn install

heart使用了image-webpack-loader做图片压缩优化，但由于网络原因，image-webpack-loader可能会卡住或者安装失败，这是需要用cnpm来单独安装image-webpack-loader

# 没有装cnpm的要先安装
npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm install image-webpack-loader -D

启动服务

yarn serve

登录

用户名密码随便填

如果没有接触过yarn的小伙伴请移步到这里

约定

目录结构

首层目录结构如下

在这里插入图片描述

每层目录下面都请创建自己项目名称的目录，然后在存放代码

在这里插入图片描述

模块入口组件请务必放在views目录，而模块里面的子组件最好components目录，方便区分。

组件存放

建议后端定义的模块入口URL为这样的格式，“XX/a/example/email/sendboxlist”，其中"XX/a/"是Jeesite响应路径都会带的前缀，heart在路径解析的时候会过滤掉的，不用Jeesite做后端可以自己实现MenuAPI接口，"example"是项目名称，"sendboxlist"是模块名称。

以上面的URL为例，我们可以在views文件夹中创建example文件夹来存放项目的所有模块入口组件，在example目录下面在创建sendboxlist目录，然后在里面创建index.vue。完整的路径就是views/example/sendboxlist/index.vue。这样做是为了能让组件加载器成功根据后端响应的模块路径找到对应的组件并动态注册到Vue中。

入口组件记得一定要叫index.vue，约好的哦_。
对组件加载器有兴趣的朋友可以看看ComponentLoader.vue，其实好简单，就是根据规矩来找组件，然后异步加载。

在这里插入图片描述

模块成功被打开了。

在这里插入图片描述

至于上面example项目中入了入口组件以外的子组件，可以在components目录创建example目录，然后按照自己的喜好把组件放进去就行。

一些工具

BaseModal.vue

描述

既然是类Windows的界面，肯定会经常用到窗口啦，如果每个窗口都要自己写样式多累啊，而且每个人写的窗口的样式都不一样，不是很奇怪吗-_-

所以封装了一个统一的模态框组件BaseModal.vue，全路径是compoents/commons/BaseModal.vue，模块入口组件在被打开是都会渲染在这个组件里面。而在实际开发中，模块里面免不了要打开更多模态框，所以请用它吧！

属性说明

主要参数

属性名说明数据类型默认值
url必须项，模态框中要渲染的组件路径，
格式为/{项目名}/{模块名}/{功能名}/{组件名}.vue，因为TypeScript不识别.vue组件，
所以路径一定要写上.vue后缀，比如/exaple/email/SendBoxHeader.vue
组件加载器会根据传入路径到components目录下读取/exaple/email/SendBoxHeader.vue，所以用模态框打开的组件必须放在components目录下		string无
backgroundColor必须项，图标的背景颜色string无
enabledFuscreen允许最大化booleantrue
resizable允许拉伸booleantrue
data传入子组件的数据，JSON格式any无
onClose模态框关闭时触发的回调函数，隐藏的时候不会触发，函数接收一个参数Function无

如果在模态框中的组件获取传入的data值，需要从其父组件中获取，即：

(this.$parent as any).data

同时还支持ViewUI的Modal组件API中的一些属性，相关的属性都封装在ModalInfo.ts属性接口中。

/**
 * 模态框信息
 * @author 彭嘉辉
 */
export default interface ModalInfo {
  // 模态框内渲染的组件路径，如果不是后端返回的模块入口路径，则必须以.vue结尾
  url: string;
  // 模块图标背景颜色
  backgroundColor: string;
  // 是否允许最大化
  enabledFuscreen?: boolean;
  // 是否可拉伸，默认可拉伸
  resizable?: boolean;
  // 传入子组件的数据，JSON格式
  data?: any;
  // 模态框关闭时的回调函数
  onClose?: Function;

  /**
   * 根据ViewUI的API，暴露出配置参数
   */
  title: string;
  maskClosable?: boolean;
  loading?: boolean;
  scrollable?: boolean;
  draggable?: boolean;
  mask?: boolean;
  okText?: string;
  cancelText?: string;
  width?: number;
  footerHide?: boolean;
  styles?: object;
  className?: string;
  zIndex?: number;
  transitionNames?: Array<string>;
  transfer?: boolean;
  onOk?: Function;
  onCancel?: Function;
  onVisibleChange?: Function;
}

BaseModal的使用示例：

 如果不想模态框重复被打开，可以在打开模态框前添加类似这样的代码///
if (this.addShotcutModalId) {
  // 如果原来已经打开了添加快捷方式的模态框，则不重复创建，直接显示
  const modal: any = Commons.findModalById(this.addShotcutModalId);
  if (modal) {
    modal.isShow = true;
    // 模拟点击模态框中ViewUI的Modal组件
    modal.$children[0].handleClickModal();
    return;
  }
}


const modalInfo: ModalInfo = {
  url: "/heart/home/destop/AddShotcutModal.vue",
  title: "添加快捷方式",
  // 为了美观，图标颜色最好不要随便设置，可以用Commons.getIconColor方法获取一个合适的颜色
  backgroundColor: Commons.getIconColor(),
  footerHide: false,
  width: 400,
  className: "select-menu-modal",
  enabledFuscreen: false,
  onOk(addShotcutModal: any) {
    if (addShotcutModal.selectedModalInfo) {
      // 添加快捷方式
      (this as any).$store.commit(
        "user/addDestopShotcut",
        addShotcutModal.selectedModalInfo
      );
    }
  }
};
// 打开一个模态框请调用Commons.showModule方法，把配置传入即可
// 返回模态框组件的id，可以根据这个id找到模态框对象
this.addShotcutModalId = Commons.showModule(modalInfo);

修改模态框默认高度，把test作为className的值传入即可：

.test {
  .ivu-modal-body {
    height: 300px !important;
  }
}

Commons.ts

相信在上面的例子中已经看到了Commons作为全局的工具类，有一些实用的方法，下面我们来看看吧。

showModule

我们刚才已经看到了，showModule方法可以很方便地打开一个模态框，通过这个方法打开的模态框会被统一管理。该方法返回打开模态框的id。

返回值：

模态框id： number

参数：

参数名说明数据类型默认值
modalInfo必须项，模态框配置信息ModalInfo无
findModalById

通过showModule打开的模态框，都会返回模态框的id，用findModalById方法则可以通过这个id拿到模态框的对象。

返回值：

模态框对象：any

参数：

参数名说明数据类型默认值
id必须项，模态框idnumber无
getIconColor

桌面需要有各种各样的图标，就是因为各种各样了，所以也不知道用什么图标好，最后就选择了使用色块，getIconColor方法会在颜色表中取一个颜色，作为色块的颜色，保证应用配色的合理性，一般是这么用的，不过你也可以拿来干别的哈。

返回值：

16进制颜色字符串:：string

参数：

不需要那种东西-_-

createId

生成一个数字id。

参数：

不需要那种东西-_-

返回值：

不重复的id：number

loadMenuTreeData

获取菜单树，如果Vuex中没有，则会取后端请求，所以是一个异步方法，基本上应该用不到吧。

返回值：

一个Promise对象：Promise<Array<MenuInfo> | null>

参数：

不需要那种东西-_-

findMenuByUrl

用过菜单的URL找到对应菜单，这个方法在底层比较有用，不过在实际项目中应该有的比较少。

返回值：

菜单对象：MenuInfo

参数：

参数名说明数据类型默认值
url必须项，菜单的URLstring无

Request装饰器

Request是一个方法装饰器，通过这个装饰器就可以把被装饰的方法变成一个异步方法，向后端发送请求，方法体本身作为异步请求成功的回调函数，响应的数据可以作为方法的入参接收。这样就不用重复书写差不多的异步请求代码了，只需要专注于处理响应的数据就行。TypeScript的装饰器真的给我们提供了更加灵活、方便、优雅的编码方式。

参数：

参数名说明数据类型默认值
url必须项，请求地址string无
method请求方式，使用RequestMethod枚举赋值RequestMethodRequestMethod.GET
paramMode请求参数传递模式,request payload或者form data，使用ParamMode枚举赋值ParamModeParamMode.REQUEST_PAYLOAD
failure请求失败时的回调函数Function无

使用例子：

import { RequestMethod } from "@/heart/constants/enum/RequestMethod";
 
class Example {
 // 方法上添加Request装饰器，使其变成异步方法
 @Request("/test", RequestMethod.GET, undefined, (error: any) = {
     console.log("这是错误信息", error.message);
 })
 // 如果调用方法时不传参，则只需要接收data参数作为响应数据即可
 fetchData(data? any): object {
   console.log("这是响应数据", data);
   return data;
 }
 
 @Request("/login", RequestMethod.POST, ParamMode.FORM_DATA, (params: object, error: any) = {
   console.log("这是错误信息", error.message);
 })
 // params是调用方法是传入的参数，必须是JSON格式的对象，建议使用属性接口，data是异步请求响应的数据
 login(params: object, data?: any): void {
  console.log("这是响应数据", data);
 }
}

调用上面定义的方法时，需要添加async和await关键字修饰，如需添加请求参数，调用方法时可传入JSON格式的数据。

使用例子：

let example: Example = new Example();
async () => {
 let data = await example.fetchData();
 console.log("这是响应数据", data);
 
 // 传入的是请求参数，必须是JSON格式
 await example.login({username: "test", password: "abcd1234"});
}

可选中菜单样式

在使用Menu组件实现可选择菜单功能时，请添加class属性为"select-menu-tree"，即可设置比较美观的可选择菜单，并且能于主题颜色相匹配。

<Menu class="select-menu-tree">
    <!-- 菜单项 -->
</Menu>

过渡动画

定义了3个全局过渡动画，用的话直接在transition标签中添加name属性就可以了。

name说明
fade淡入淡出
slide-fade向上出现，向下效时过渡动画
fast-slide-fade向上消失，向下出现，快速过渡动画

使用实例：

<transition name="fast-slide-fade">
    <!-- 要添加过渡效果的元素 -->
</transition>

全局配置文件

在项目的pulbic目录存放着一个global-config.js文件

/**
 * 全局配置类，建议统一通过GlobalConfigReader类来读取配置项
 */
// 由于这里不会被webpack管理，babel不会起作用，所以不能用es6语法，防止浏览器不兼容
(function() {
  const config = {
    // --是否使用反向代理，默认为true
    // reverseProxy: false,
    // --生产环境后端服务的地址，reverseProxy为false时生效（针对部署在Tomcat等不具备反向代理功能的容器时使用，如果使用nginx部署则不需要这个配置项）
    // serverURL: "http://rap2.taobao.org:38080/app/mock/251389",
    // --下面可以按需要扩展配置项，扩展之后记得一定要同时扩展/src/utils/GlobalConfigReader.ts中GlobalConfig类的属性
  };
  // 没有配置就不存localStorage了
  if (config === {}) {
    return;
  }

  const configJSONStr = JSON.stringify(config);
  localStorage.setItem("global-config", configJSONStr);
})();

目前只支持reverseProxy和serverURL两个配置项，如果需要扩展，可以在config对象中自行添加，需要处理自定义的配置项可以通过GlobalConfigReader类的readGlobalConfig方法获取config对象，然后按照自己的业务逻辑处理自定义的配置项。

由于global-config.js在public目录，因此不会被Webpack打包，所以配置项可以在生产环境实现热配置。

个性化

自定义壁纸

heart具备切换壁纸的功能，不过目前只有4张壁纸，如果嫌少的话可以自己添加哦。

  1. 首先把你喜欢的壁纸添加到public/wallpapers目录下

在这里插入图片描述

  1. 在src/constants/heart/values/Global.ts文件中的WALLPAPER_URLS数组添加自己的图片路径
/**
 * 壁纸路径列表，指向public/wallpapers目录
 */
export const WALLPAPER_URLS: Array<string> = [
  "/wallpapers/background0.jpg",
  "/wallpapers/background1.jpg",
  "/wallpapers/background2.jpg",
  "/wallpapers/background3.jpg"
  // 这里自行添加路径
];

这样你的图片也可以成为壁纸啦_

自定义主题

heart可以随时切换颜色主题，目前提供了4种主题颜色，当然你可以根据自己的喜好自行添加。

  1. 在src/assets/heart/global/scss/themes目录下创建自己的主题样式表，需要时scss文件哦，然后复制下面代码到自己的样式表文件中。
@import "./variables.scss";

// 红色主题
$primary-red: #C14253;
$lightPrimary-red: #C25D6B;
$darkPrimary-red: #B53647;

.red {
    .heart-base-modal {
        .ivu-modal {
            .ivu-modal-content {

                // 模态框头部
                .ivu-modal-header {

                    // 标题
                    .title {
                        color: $title;
                    }

                    // 按钮组
                    .button-group {

                        // 按钮默认样式
                        .ivu-btn {
                            color: $content;
                        }

                        // 最大化和最小化按钮
                        .fullscreen-button:hover,
                        .reset-screen-button:hover,
                        .hide-button:hover {
                            background-color: $background;
                        }

                        // 关闭按钮
                        .close-button:hover {
                            background-color: $error;
                            color: #ffffff;
                        }
                    }
                }
            }
        }
    }

    // 开始按钮
    .start-button {
        background-color: rgba($color: $background, $alpha: 0.9);
        color: $primary-red !important;

        &:hover {
            background-color: $primary-red;
            color: white !important;
        }
    }

    // 底部栏打开模块的小图标
    .tab-container {
        .ivu-dropdown {
            .tab-icon {
                color: white;

                // 底下的小线条
                &::after {
                    background-color: $darkPrimary-red;
                }

                &:hover {
                    background-color: rgba($color: white, $alpha: 0.2);
                }
            }

            // 选中样式
            .tab-icon-active {
                background-color: rgba($color: white, $alpha: 0.4);

                &:hover {
                    background-color: rgba($color: white, $alpha: 0.6) !important;
                }
            }
        }
    }

    // 右下角小图标
    .icon-group {
        .show-destop {
            border-left: 1px solid $lightPrimary-red;

            &:hover {
                background-color: rgba($color: white, $alpha: 0.5);
            }
        }
    }

    // 开始菜单
    .start-box {
        .menu-container {
            background-color: rgba($color: white, $alpha: 0.8);

            // 菜单区域
            .menu-box {
                background-color: rgba($color: white, $alpha: 0);

                // 菜单树
                .menu-tree {
                    background-color: rgba($color: white, $alpha: 0);

                    .ivu-menu-item-active:not(.ivu-menu-submenu) {
                        color: $title !important;

                        &:hover {
                            background-color: rgba($color: $lightPrimary-red, $alpha: 0.3) !important;
                            color: $title !important;
                        }
                    }

                    .ivu-menu-item {
                        span {
                            color: white;
                        }
                    }

                    .ivu-menu-item,
                    .ivu-menu-submenu-title {
                        color: $title;

                        &:hover {
                            background-color: rgba($color: $lightPrimary-red, $alpha: 0.3);
                            color: $title;
                        }
                    }
                }
            }

            // 开始菜单右侧用户操作区域
            .user-info {

                .user-operation-box {

                    .user-operation {

                        .operations {
                            color: $content;
                            background-color: rgba($color: white, $alpha: 0);

                            .ivu-menu-item-active:not(.ivu-menu-submenu) {
                                color: $title !important;
                                background: none !important;

                                &:hover {
                                    background-color: rgba($color: $lightPrimary-red, $alpha: 0.3) !important;
                                    color: $title !important;
                                }
                            }

                            .ivu-menu-item,
                            .ivu-menu-submenu-title {

                                &:hover {
                                    background-color: rgba($color: $lightPrimary-red, $alpha: 0.3);
                                    color: $title;
                                }
                            }
                        }

                        .logout-button {
                            background-color: rgba($color: white, $alpha: 0);
                            color: $primary-red;
                            border-color: $primary-red;

                            &:hover {
                                background-color: rgba($color: $primary-red, $alpha: 0.9);
                                color: white;
                            }
                        }
                    }
                }
            }
        }
    }

    // 锁定界面
    .lock {

        .login-form-box {

            .login-form-lock {

                .form-content {
                    color: white;

                    .form-lock {

                        .ivu-input-suffix {

                            // 登录按钮
                            button {

                                .icon-arrow-right {
                                    color: white;
                                }
                            }
                        }
                    }

                }
            }
        }
    }

    // 登录页面表单
    .login-form {
        background-color: rgba($color: white, $alpha: 0.7);

        .ivu-form {
            .ivu-form-item {
                .ivu-form-item-content {
                    .ivu-input-prefix {
                        i {
                            color: rgba($color: $primary-red, $alpha: 0.7);
                        }
                    }
                }
            }
        }
    }

    // 可选则菜单样式
    .select-menu-tree {
        background-color: white;

        .ivu-menu-item-active:not(.ivu-menu-submenu) {
            color: $primary-red !important;
            background: rgba($color: $darkPrimary-red, $alpha: 0.1) !important;

            &::after {
                background: $darkPrimary-red !important;
            }
        }

        .ivu-menu-item,
        .ivu-menu-submenu-title {
            color: $title;

            &:hover {
                background-color: rgba($color: $lightPrimary-red, $alpha: 0.3);
                color: $title;
            }

            span {
                color: white;
            }
        }

    }

    // 404页面
    .not-found {
        color: $primary-red;
    }

    // 滚动条滑块
    ::-webkit-scrollbar-thumb {
        background: $primary-red;
    }

    // 滚动条轨道
    ::-webkit-scrollbar-track {
        background: white;
    }

    // 修改按钮默认样式
    .ivu-btn:focus {
        box-shadow: 0 0 3px $primary-red;
        ;
    }

    .ivu-btn-default,
    .ivu-btn-dashed {
        border-color: $primary-red;
        color: $primary-red;

        &:hover {
            border-color: $lightPrimary-red;
            color: $lightPrimary-red;
        }
    }

    .ivu-btn-default.active,
    .ivu-btn-default:active,
    .ivu-btn-dashed.active,
    .ivu-btn-dashed:active {
        border-color: $primary-red;
        color: $primary-red;
        box-shadow: 0 0 2px $primary-red;
    }

    .ivu-btn-primary {
        background-color: $primary-red;
        border-color: $primary-red;

        &:hover {
            background-color: $lightPrimary-red;
            border-color: $lightPrimary-red;
        }
    }

    .ivu-btn-primary.active,
    .ivu-btn-primary:active {
        background-color: $primary-red;
        border-color: $primary-red;
        box-shadow: 0 0 2px $primary-red;
    }

    .ivu-btn-text:hover {
        color: $lightPrimary-red;
    }

    .ivu-btn-text.active,
    .ivu-btn-text:active {
        color: $primary-red;
    }

    // 顶部进度条颜色
    #nprogress .bar {
        background: $primary-red !important;
    }
}

  1. 其实你只需要在自己的主题样式表中，定义三个主题颜色变量，把最顶层的class名称改成自己的，然后把样式表中调用到主题颜色的变量名改成自己的就可以了。

  2. 在src/constants/heart/values/Global.ts文件中的THEMES数组中按格式添加。

/**
 * 主题颜色映射
 */
export const THEMES = [
  { class: "red", color: "#C14253" },
  { class: "blue", color: "#2d8cf0" },
  { class: "purple", color: "#7952b3" },
  { class: "black", color: "#314351" }
  // 这里可以添加自己的主题，按照上面的格式，应该看得懂吧-_-
]

当然，目前并不是所有ViewUI组件都适配了主题颜色，如果有用到某些组件，不适配主题颜色的话，在themes目里下的样式表中补上就可以了，记得要所有主题都补上哦

对接自己的后端

前面提过，由于公司要求，heart默认会对接Jeesite的后端，但是考虑到扩展性，在heart开发的时候，与Jeesite耦合的类或方法都标记了"4Jeesite"的后缀，只要搜索4Jeesite就可以知道对接其他后端时，需要修改哪些地方了。api部分还定义了接口，对接其他后端时，api部分只需要按自己的业务需求实现对应的接口即可。

在这里插入图片描述

素者素心
关注
专栏目录
前端网页技术之 Vue
cgblpx的博客
08-02 5万+
文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde
推荐一款适用于PC环境的Vue组件 - vue-menu
gitblog_00021的博客
05-25 422
推荐一款适用于PC环境的Vue组件 - vue-menu vue-menuMenu/Contextmenu Component for vue2项目地址:https://gitcode.com/gh_mirrors/vu/vue-menu 在现代Web开发中，移动端成为了重点关注的领域，传统依赖鼠标操作的UI设计如窗口、右键菜单和嵌套菜单逐渐淡出视线。然而，层次结构清晰的交互方式——例如上下文菜...
vue-window-vue2的窗口UI组件。-Vue.js开发
05-27
vue-window简介最近的Web应用程序主要用于移动环境。 因此，窗口UI不再是主流。 但是，窗口UI是Vue-Window。简介最近的Web应用程序主要用于移动环境。 因此，窗口UI不再是主流。 但是，窗口UI对于PC环境的专业Web应用程序仍然有用。 该软件包是PC环境中作为Vue组件的窗口UI的实现。 适用于vue2的工作演示功能窗口组件Windows可以拖动自动z索引控制可调整大小的z索引组可配置的颜色主题内置3个颜色主题打开/关闭ani
创建vue3项目并配置PC端屏幕适配（同样也支持vue2）
最新发布
weixin_58495461的博客
07-22 1545
2.这里要和大家说的就是lib-flexible-computer这个npm装的依赖，想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖。3.选择项目所需要的依赖项(刚学习vue的同学建议选择安装（Linter / Formatter 支持代码风格检查和格式化）4.然后在src同级下建立一个vue.config.js文件（如果有就不需要重复创建了），并在此文件中加入以下代码。8.询问是否记录这一次的配置，以便下次使用，如一开始的时候会显示的vuecli3配置（这个根据自己的需求选择）
windows搭建前端开发环境
不疯魔不成活
09-24 1759
奶茶九月，我换了一份工作，在离开时也就丢下了自己曾掏了7000大洋换过屏幕的mac Book Pro aaron特制版。 新公司用thinkCentre 台式机开发，有幸抽到window10系统，隔壁同学是window7（坑更多） 入职已经第四天了，基本上就是在搭建开发环境和熟悉项目（项目代码好复杂） 抽空产出一篇文章，记录一下我和我的新宠磨合期问题…（前端还用搭环境 囧？） 台式机组装 领回来主机、显示器、 鼠标 、键盘 在自己工位接上线儿 擦一擦灰~ 开机建账号 如果是公司有各种权限自己不会弄.
windows下开发时前端界面和后端(node.js)联调的方法------------nginx
阿姆斯特朗炮的博客
05-29 660
博主最近忙碌着我的个人博客网站的开发，刚学习了前端和后端联调，make一下，以防忘记 第一步，你有一个后端程序，以及一个前端程序。接口什么的都要写好 第二步，下载nginx并安装 官网下载地址 安装教程(博客园大佬) nginx有以下的功能 一，用于静态服务，负载均衡 二，反向代理 我们用到的是nginx反向代理的原理，因为博客网站的登录cookie不能跨域共享，所以要用nginx来解...
模仿Win10 UI 框架 Vue3
启明星的指引---博客
08-10 1362
Win10 UI 框架 Vue3 推荐 Vue 3 + Typescript + Vite + Using <script setup> 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Demo|Demo|Demo Usage 开发流程 推荐clone本仓库，在本仓库基础上修改，模版在/template目录下 引入winVue租组件（clone可以跳过此步骤） <WinVue></WinVue> import WinVue fro
Vue UI 创建Vue前端工程(Windows)
热门推荐
jmu201821122110
09-27 8万+
Vue ui 创建Vue前端工程1.开启vue ui 服务2.访问 vue ui 界面3.创建项目4. 添加 element-ui 插件4.添加依赖4.启动 Vue 项目5.访问 Vue 项目 1.开启vue ui 服务 快捷键 win+r 打开 cmd 输入下面命令 vue ui 2.访问 vue ui 界面 打开浏览器,地址栏输入 localhost:8080 3.创建项目 点击创建 选择你要创建的项目目录,点击 在此创建新项目 输入项目名称,包管理器选择 npm, git 命令填写 init p
美团旅途 coderwhy的vue3+ts入门项目，技术栈vue3 typescript vantui hooks
04-03
在 Vue3 项目中，Vant UI 可以快速构建用户界面，提升开发效率。 Hooks 是 React 中引入的概念，但在 Vue3 中也得到了充分的应用。Vue3 的 Hooks 允许开发者在不使用 class-based components 的情况下，管理组件的...
基于Furion与Vue的OA协同办公系统开源代码
03-25
该系统以Furion框架为基础，前端界面使用View UI，致力于提供高效便捷的协同办公解决方案。 文件类型分布如下： - Vue文件：136个 - TypeScript文件：97个 - C#文件：58个 - JSON配置文件：8个 - PNG图片资源：5个 ...
基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）
youyacoder的博客
09-13 1万+
在src目录下创建store，并在src/store中创建demo.ts文件。该文件中咱们使用的方式实现store。import {
vuemetrotile用于构建类似Windows10metro布局的Vue组件
08-10
vue-metro-tile：
vue-win10-admin:Vue + Koa2建立窗口10风格的管理系统
03-11
用Vue + KOA2内置window10风格的管理系统 |中文 这可能是目前唯一一个更大的完整Windows10风格的开源前先前集成的管理系统 前端Vue + Vuex + Vue路由器+ Element + UI 后端节点+ koa2 + Sequelize 数据库mysql 更新日志 序号 时间 功能 功能 描述 0 2020-07 前端系统功能 开发中 仪表盘工作台，分析页面，主题设置 1个 2020-06 前端系统UI 已完成 win10风格桌面系统：仿制的开始，快捷菜单，任务栏，消息，支持窗口大小初始化（有小bug待修复） 2个 2020-06 前端功能 已完成 （1）登录，动态菜单和权限生成（2）系统设置：权限设置，角色设置，用户设置，系统日志（3）平台管理：桌面背景设置 3 2020-06 初步 已完成 跨域解决，令牌统一拦截，权限拦截，路由合并，基本完成相关功能的A
Django+Vue3.2+ElementPlus+TypeScript开发的在线考试系统源码.zip
03-20
这是一个基于Django、Vue3.2、ElementPlus和TypeScript技术栈构建的在线考试系统的源码项目。让我们逐一深入探讨这些技术以及它们在系统中的应用。 **Django**： Django是一个高级的Python Web框架，它遵循MVT...
winui vue_WinUI 3.0：Windows控件的未来
cxu0262的博客
07-02 1944
winui vue 很难选择Windows UI框架。 毕竟，有很多。 您是否使用熟悉的WinForms，更现代的Windows Presentation Framework或Windows 10的Universal Windows Platform构建应用程序？ 每个控件都有其优缺点，它们具有不同的控件集，设计工具和受支持的Windows版本。 它们支持不同的设计语言，仅通用Windows...
windows桌面客户端的UI框架
qq_40904144的博客
09-30 1405
https://xylt.github.io/windows-ui/ Qt – 跨平台的软件开发工具包 wps yy语音 Electron – 用前端的知识来开发桌面应用 vscode
vue 引入2套ui组件_vue2的窗口UI组件
cuk5340的博客
07-22 552
vue 引入2套ui组件 窗口 (vue-window) Recent web applications are mainly for mobile environments. Therefore window UI is no longer mainstream. However, window UI is still useful for professional web applicatio...
vue 任意拖拽_超牛 Vue.js 仿win7桌面管理DogstarUI
weixin_39537298的博客
12-12 807
今天给大家分享一个超棒的Vue模拟windows桌面UI管理Dogstar-UI。dogstar-ui 基于vuejs2.x框架虚拟windows桌面效果/管理桌面。在窗口和桌面端均可使用模态框和抽屉弹框。项目中弹窗功能做的挺不错，可实现任意拖拽、四周缩放及最大/小化窗口。弹窗获取焦点后层级置顶。快速安装# 克隆项目到本地git clone https://gitee.com/ispace-cod...
模仿Windows10 UI 框架 Vue3
启明星的指引---博客
08-30 1717
vue3-win10 Vue3 仿Win10 UI 框架 推荐 Vue 3 + Typescript + Vite + Using <script setup> 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Demo|Demo|Demo 可视化的一大步 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Vue3支持 推荐 Vue 3 + Typescript + Vite 方便快捷 使用原本的Vue开发方式即可 ...
前端开发技术总结：React, TypeScript与Vue
"该文档是一个前端开发技术的总结，涵盖了Vue、React、ES6、TS和JS等关键领域。作者分享了创建React+TS+Material项目的方法，并对React的JSX、类型安全、循环遍历、有状态组件以及路由（react-router）等方面进行了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值