使用vite+vue3+antd+less搭建基础项目

1、项目的创建

项目的创建在上一篇文章中已经讲过了。
可以查看这篇文章vite+vue3.0创建项目

这篇文章中关于最后的问题antd的使用，这里暂时不做解决，因为vite对于vue3周边的支持还不是非常好。

我们暂时还在main.ts里引入antd的css文件进行使用。

2、引入vue-router和vuex

yarn add vue-router@next -S
yarn add vuex@next -S

配置main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 这里要用./ 不能用@/ 会有红色波浪线报错找不到，但是不影响页面显示
import store from "./store";
// 引入antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';


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

3、布局

创建layout/index.vue文件
引入antd的layout组件
可以写一个layout.less文件，全局控制布局的样式，将一些多个地方可能用到的值写成变量。

4、侧边栏

1、获取路由表router/index.ts中的动态路由

注意要区分router和route：
router是全局路由对象，可以进行路由的跳转；
route是当前路由对象，可以进行参数的接收；

2、根据动态路由表生成侧边栏
sideMenu.vue文件

<template>
  <a-layout-sider v-model:collapsed="collapsed" collapsible>
    <a-menu
      mode="inline"
      theme="dark"
      v-model:selectedKeys="activeMenuKeys"
      @click="handleClickMenu"
    >
      <side-menu-item
        v-for="route in routes"
        :key="route.path"
        :routeItem="route"
      />
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router"; // useRoute当前路由, useRouter全局路由
import SideMenuItem from "./sideMenuItem.vue";

export default defineComponent({
  components: { SideMenuItem },
  setup() {
    // 获取所有路由配置为多级菜单
    const router = useRouter();
    const routes = router.options.routes;
    console.log(router);

    // 定义菜单栏数据
    const menuState = reactive({
      collapsed: false,
      activeMenuKeys: ["/"],
    });

    /**
     * 根据当前的路由判断要高亮的侧边栏
     */
    const activeMenuFun = (route) => {
      const { meta, path } = route;
      // 定义一个当前高亮的菜单空数组
      let curentActivePath = [];
      if (meta.activeMenu) {
        curentActivePath.push(meta.activeMenu);
      } else {
        curentActivePath.push(path);
      }
      menuState.activeMenuKeys = curentActivePath;
    };

    // 获取当前的路由 并高亮
    const route = useRoute();
    activeMenuFun(route);

    // 点击菜单
    const handleClickMenu = (res) => {
      // console.log(res);
      // 注意这里点击菜单要跳转，因为antd没有index用来做router的跳转路径
      router.push(res.key);
      activeMenuFun(route);
    };

    return {
      routes,
      ...toRefs(menuState),
      handleClickMenu,
    };
  },
});
</script>
<style scoped lang="less">
@import "../layout.less";
</style>

sideMenuItem.vue文件

<template>
  <div v-if="!routeItem.meta.hidden">
    <template v-if="routeItem.children && routeItem.meta.showChildren">
      <a-sub-menu :key="routeItem.path">
        <template #title>
          <span>
            <span>{{ routeItem.meta.title }}</span>
          </span>
        </template>
        <side-menu-item
          v-for="route in routeItem.children"
          :key="route.path"
          :routeItem="route"
        />
      </a-sub-menu>
    </template>
    <template v-else>
      <a-menu-item :key="routeItem.path">
        <span>{{ routeItem.meta.title }}</span>
      </a-menu-item>
    </template>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "SideMenuItem",
  props: {
    routeItem: {
      typeof: Object,
      default: {},
      require: true,
    },
  },
  setup(props) {
    // console.log(props.routeItem);
  },
});
</script>

注意使用antd的坑：
坑1：
antd的当前高亮的路由不是一个字符串，而是一个数组；

坑2：（主要是elment-ui平时用多了）
一开始以为路由设置完，点击当前路由菜单就可以跳转到对应的路由，但是点击之后发现，点击的菜单栏高亮了，但是并没有跳转到对应的路由，菜单栏的地址都没变，研究了好一番才知道，
elemnt-ui有一个router特性：

而antd并没有，因此antd每次点击菜单之后只能自己进行路由对应的跳转。

vite.config.ts文件的配置

参考这篇文章：
vite.config.ts文件的配置