后台地址：https://www.creative-tim.com/product/muse-vue-ant-design-dashboard?ref=antdv-official

一、配置 Vite+AntDesginVue

• 配置Vite+AntDesginVue

Vite+AntDesginVue配置：https://blog.csdn.net/qq_17523181/article/details/143241626

• 安装vue-router

cnpm i vue-router

---

二、安装muse-vue-ant-design

• 下载后台
• cnpm i，安装依赖
• 运行查看
  
• 现在看到 muse-vue-ant-design没有使用vite，也没有使用vue3

---

三、安装less

• 原版使用sass，现在我们改用less

cnpm i less

• vite.config.js里配置，为less设置支持js语法和字符集默认设置
  
• 制作一个less测试：定义一个样式，定义一个变量，定义一个循环
• src/less/test.less
  
• 在main.js里加入

import '@/less/test.less'

• 在App.vue里简单测下less
  可以看到body的标签起到了作用
  若要使用变量，则需要把less文件引入
  
  写一个bg-primary的class，可以看到样式已经有
  

---

四、移植Muse-Ant-Desgin-Vue程序到Vite框架

• 拷贝文件
  

• 建立一个less文件夹，用于移植scss的内容
  建立一个app.less与base/_variables.less
  app.less下先import一个less
  @import “@/less/base/_variables” ;
  _variables.less文件里，把$替换成@

• main.js里改为

import { createApp } from 'vue';
// 全局样式
import '@/less/app.less'
// app实例
import App from './App.vue';
const app = createApp(App);
// 路由注册
import router from './router'
app.use(router)
// ant-design-vue注册
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
app.use(Antd)
// 全局组件注册
import DashboardLayout from './layouts/Dashboard.vue';
app.component("layout-dashboard", DashboardLayout)app.mount('#app')

• 在App.vue里

<template><div id="app"><component :is="layout"><router-view /></component></div>
</template><script setup>
import {computed} from "vue";
import {useRoute} from 'vue-router'
const route = useRoute();
const layout = computed(()=>{return "layout-" + ( route.meta.layout || "default" ).toLowerCase() ;
})</script>

---

五、Muse的框架

• App.vue中，通过component动态组件来实现外部layout结构的切换
  这里的router-view只是示意，没有作用，真正的router-view是写在layout组件中的

<component :is="layout"><router-view />
</component>

• 原版使用动态组件component，来确定框架的vue代码，组件在main.js里注册
  
• 根据路由不同，选择layout组件
  

---

六、Router与入口调试

• router/index.js 修改为vue3的语法，先定义/ 的默认入口，/dashboard 的首页vue
  routes原来定义了layout的参数，用于选择使用什么layout框架；
  vue3需要定义在meta里面
  

• router加入main.js
  

• 修改App.vue，实现原来的逻辑
  

• 把Dashbroad.vue里的组件、js代码全部注释，在html某处写入111，用于测试

• 把layouts/Dashboard.vue，也同样注释，写入222，用于测试

• 在main.js里注册layout
  

• 运行测试，发现2个vue文件都已经加载

---

七、修改全部sass，变为less

• 基于之前的结构，一个个改过来，并加入less，改一个，测试一个
• _utilities.less：
  循环与extend的写法

each(range(0,10), {@j: @value * 5;.mt-@{j} {margin-top: 1px * @j !important;}.mb-@{j} {margin-bottom: 1px * @j !important;}.ml-@{j} {margin-left: 1px * @j !important;}.mr-@{j} {margin-right: 1px * @j !important;}.my-@{j} {&:extend(mt-@{j});&:extend(.mb-@{j});}.mx-@{j} {&:extend(.ml-@{j});&:extend(.mr-@{j});}.m-@{j} {&:extend(.my-@{j});&:extend(.mx-@{j});}
});

遇到数字开头的数组，改成

@shadows: {s0: @shadow-0;s1: @shadow-1;s2: @shadow-2;s3: @shadow-3;
};each(@shadows, {.shadow-@{index} {box-shadow: @value !important;}
})

---

八、修改vue2，变为vue3

• 注意一：script 后面要加setup，不然会提示defineProps错误啥的
• 注意二：import组件的时候，需要加上.vue的文件后缀
• 注意三：一个模块一个模块进行改动，测试，才能清楚哪里没改对
• 注意四：route的meta使用

import {useRoute} from 'vue-router'
const route = useRoute();

• 注意五：props的变量，需要在template里的加入props；script里一些this.变量也需要改为props.

let props = defineProps({data: {type: Object,},height: {type: Number,},
})

• 注意六：在vite.config.js里设置下base目录与publicDir目录
  
• 注意七：图片的src，可以需要在前面加上/号

---

九、最后

…