Muse-Ant-Desgin-Vue 改造成 Vite+Vue3
后台地址：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，可以需要在前面加上/号
九、最后
…