0 Star 0 Fork 0

Sglee / Antd学习

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

ant-demo

Project setup

安装node.js
npm install vue
npm install -g @vue/cli
npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install ant-design-vue --save
npm install --save-dev babel-plugin-import
npm install nprogress

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

npm run build -- --report

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

tab数据格式

const defaultTabs = [
      {
        title: "仪表板",
        icon: "experiment",
        type: "vue",
        content: "modules/dashboard/IndexDashboard.vue",  //使用vue模块
        key: "k1",
        closable: false      //不可关闭,用于显示固定的tab页
      }
    ];

菜单数据

export default {
  userInfo: {
    name: "Admin",
    //需要注意Vue里文件的使用方式
    avatar: "/images/avatar.jpg"
  },
  nav: {
    //默认显示的导航菜单
    defaultKey: "1",
    //当前显示的导航菜单
    currentKey: "1",
    //详细的菜单数据
    items: [    //最外层用于显示导航,次一层用于显示菜单,点击导航会自动切换菜单
      {
        key: "1",
        title: "营销",
        icon: "area-chart",
        children: [
          {
            key: "10",
            title: "营销1",
            icon: "radar-chart",
            children: [
              {
                key: "101",
                title: "营销101",
                icon: "stock"
              },
              {
                key: "102",
                title: "营销102",
                icon: "ie"
              }
            ]
          },
          {
            key: "12",
            title: "百度",
            icon: "dot-chart",
            type: "url",
            content: "http://www.baidu.com"    //可以是iframe显示指定url页面
          },
          {
            key: "3",
            title: "LayUI",
            icon: "line-chart",
            type: "url",
            content: "http://www.layui.com"
          }
        ]
      },
      {
        key: "2",
        title: "报表",
        icon: "fund",
        children: [
          {
            key: "21",
            title: "报表1",
            icon: "radar-chart",
            children: [
              {
                key: "211",
                title: "报表11",
                icon: "radar-chart"
              }
            ]
          },
          {
            key: "22",
            title: "报表2",
            icon: "radar-chart"
          },
          {
            key: "23",
            title: "报表3",
            icon: "radar-chart"
          }
        ]
      },
      {
        key: "3",
        title: "告警",
        icon: "pie-chart"
      }
    ]
  }
};

Comments ( 0 )

Sign in for post a comment

About

antd 制作的网站后台基础框架 主要目的是学习antd,目前勉强能用 spread retract
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more
1
https://gitee.com/shaoguanlee/antd_learning.git
git@gitee.com:shaoguanlee/antd_learning.git
shaoguanlee
antd_learning
Antd学习
master

Search

103611 48b8ff67 1899542 103622 4d02230c 1899542