Vue笔记-Ant Design Vue的使用（Vue3）

亦凉 2023-01-14 12:58 312阅读 0赞

这里文档要这样看：

![20210420175826573.png][]

这里

npm install ant-design-vue@2.0.0-rc.3 -save
    
    npm install axios@0.21.0  --save

在main.js中添加antd.css及Antd

import { createApp } from 'vue'
    import App from './App.vue'
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    
    const app = createApp(App);
    app.use(Antd).mount('#app');

修改App.vue

<template>
      <a-layout>
        <a-layout-header class="header">
          <div class="logo" />
          <a-menu
                  theme="dark"
                  mode="horizontal"
                  v-model:selectedKeys="selectedKeys1"
                  :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout>
          <a-layout-sider width="200" style="background: #fff">
            <a-menu
                    mode="inline"
                    v-model:selectedKeys="selectedKeys2"
                    v-model:openKeys="openKeys"
                    :style="{ height: '100%', borderRight: 0 }"
            >
              <a-sub-menu key="sub1">
                <template #title>
                  <span>
                    <user-outlined />
                    subnav 1
                  </span>
                </template>
                <a-menu-item key="1">option1</a-menu-item>
                <a-menu-item key="2">option2</a-menu-item>
                <a-menu-item key="3">option3</a-menu-item>
                <a-menu-item key="4">option4</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub2">
                <template #title>
                  <span>
                    <laptop-outlined />
                    subnav 2
                  </span>
                </template>
                <a-menu-item key="5">option5</a-menu-item>
                <a-menu-item key="6">option6</a-menu-item>
                <a-menu-item key="7">option7</a-menu-item>
                <a-menu-item key="8">option8</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub3">
                <template #title>
                  <span>
                    <notification-outlined />
                    subnav 3
                  </span>
                </template>
                <a-menu-item key="9">option9</a-menu-item>
                <a-menu-item key="10">option10</a-menu-item>
                <a-menu-item key="11">option11</a-menu-item>
                <a-menu-item key="12">option12</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding: 0 24px 24px">
            <a-breadcrumb style="margin: 16px 0">
              <a-breadcrumb-item>Home</a-breadcrumb-item>
              <a-breadcrumb-item>List</a-breadcrumb-item>
              <a-breadcrumb-item>App</a-breadcrumb-item>
            </a-breadcrumb>
            <a-layout-content
                    :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
            >
              Content
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </template>
    
    <script>
    
      import {defineComponent} from 'vue'
      export default defineComponent({
        name: 'app',
        components: {
    
        }
      });
    </script>
    
    <style>
      #components-layout-demo-top-side-2 .logo {
        float: left;
        width: 120px;
        height: 31px;
        margin: 16px 24px 16px 0;
        background: rgba(255, 255, 255, 0.3);
      }
    
      .ant-row-rtl #components-layout-demo-top-side-2 .logo {
        float: right;
        margin: 16px 0 16px 24px;
      }
    
      .site-layout-background {
        background: #fff;
      }
    </style>

程序运行截图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70][]

[20210420175826573.png]: /images/20221022/0ed334e1424841b885289d43b245d6a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70]: /images/20221022/f650934ccdfa4662b17f32b89b6c65c9.png