SpringBoot知识体系+Vue3 实战WIKI知识库系统笔记 demo6_vue

最新推荐文章于 2024-12-22 22:48:04 发布

原创

最新推荐文章于 2024-12-22 22:48:04 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring #intellij-idea

本文介绍了如何在Vue项目中集成Ant Design Vue库，并展示了如何使用组件化方式重构布局，包括侧边栏菜单、顶部导航和底部footer。通过router-view实现内容动态加载，同时详细展示了如何引入和使用Ant Design Vue的组件实例。

集成ant design

npm install ant-design-vue@next --save

引入 main.js

import {
   
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'; // 引入 ant design
import 'ant-design-vue/dist/antd.css';


createApp(App).use(store).use(router).use(Antd).mount('#app')

使用：https://next.antdv.com/components/button-cn 直接在html中使用即可。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <a-button type="primary">Primary Button</a-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
     
     
  name: 'Home',
  components: {
     
     
    HelloWorld
  }
}
</script>

页面布局

打开下面的网站，里面有各种各样的组件可以直接使用。这里我选择了layout的一个布局。

https://next.antdv.com/components/layout-cn

将vue-cli的App.vue 页面改成下面的布局。删除App.vue原有的script和css将layout的template和css复制进来即可。

<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          v-model:selectedKeys="selectedKeys1"
          theme="dark"
          mode="horizontal"
          :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
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            mode="inline"
            :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>