DncVueSampleダウンロード - DncVueSampleソースコードのダウンロード

DncVueSample

その他のカテゴリー

1.0.0

ダウンロード

DncVueSample について

VncVueSampleはCodeDefault.com (https://codedefault.com) によってリリースされ、更新サポートを提供します。

著者:学長

デモのアドレス: https://codedefault.github.io/DncVueSample/

DncVueSample: Vue.js + iview フロントエンドフレームワークをベースとしたバックエンド管理システムのテンプレートです。OA、CRM、CMS などの管理システムのバックエンド開発に適しています。

テンプレートの紹介

バージョン情報

DncVueSample が現在依存しているコンポーネントのバージョン情報は次のとおりです。

Vue.js: 2.5.17 iview: 3.1.0

レイアウトとメニュー

このテンプレートは、左側にメニュー、右側に操作パネルが配置されています。左側のメニューツリーは現在 2 レベルのメニューをサポートしており、メニューツリーは JSON 形式で定義されています。その中で、メニュー項目は、アイコン、メニューリンクアドレス、および次のような詳細な構成属性の指定などのオプションをサポートします。

 {
    title:"用户及授权",
    name:"1",
    icon:"logo-apple",
    menuItem:[
        {
            label:"用户管理",
            name:"1-1",
            href:"/account/user/list",
            icon:"logo-apple"
        },
        {
            label:"资源管理",
            name:"1-2",
            href:"/account/resource/list",
            icon:"logo-windows"
        },
        {
            label:"角色管理",
            name:"1-3",
            href:"/account/role/list",
            icon:"logo-tux"
        }
    ]
}

左側のメニューは折りたたみと展開をサポートしており、メニューが折りたたみ状態の場合は、メニュー項目のアイコンのみが表示され、システム全体の水平方向の操作インターフェイスが広くなり、データ表示効果が向上します。

タブ

右側の操作領域はタブ（iframe）で開かれた各操作インターフェースであり、各タブページは独立したページです。

各タブをクリックすると、左側のメニューが現在開いているメニューに自動的に移動します。

タブを切り替えるとき、アニメーション効果の切り替えをサポートしており、視覚的なエクスペリエンスは非常に優れています。

結論

DncVueSample は、Vue.js + iview をベースにした最小限の静的バックエンド管理システムテンプレートです。これはバックエンド管理システムテンプレートのプロトタイプ UI にすぎず、システム機能は含まれません。バックエンド管理システムの初期テンプレートは、ユーザーがプロジェクトの UI フレームワークの構築を迅速に開始するのに役立ちます。