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
README.md 2.91 KB
Copy Edit Web IDE Raw Blame History
shaoguanlee@foxmail.com authored 2020-07-02 20:48 . ......

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"
      }
    ]
  }
};

Comment ( 0 )

Sign in for post a comment

1
https://gitee.com/shaoguanlee/antd_learning.git
git@gitee.com:shaoguanlee/antd_learning.git
shaoguanlee
antd_learning
Antd学习
master

Search