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,可以需要在前面加上/号

九、最后

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906098.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Proteus中单片机IO口外接LED输出低电平时,引脚却一直保持高电平的问题(已解决)

文章目录 前言解决方法后记 前言 一个排阻接八个 LED&#xff0c;方便又省事&#xff0c;但出现了P1端口输出低电平后&#xff0c;仿真引脚却一直显示红色保持高电平不变&#xff0c;用电压表测量显示 2V 左右。 这是仿真的问题&#xff0c;在用开发板时是不会遇到的&#xff…

DEVOPS: 认证与调度

概述 不知道大家有没有意识到一个现实&#xff0c;就是大部分时候&#xff0c;我们已经不像以前一样通过命令行&#xff0c;或者可视窗口来使用一个系统了现在我们上微博、或者网购&#xff0c;操作的其实不是眼前这台设备&#xff0c;而是一个又一个集群 通常&#xff0c;这样…

Altium Designer使用技巧(一)

一、清除绿色报错。 按TM快捷键。即可消除报错。 二、模块化框选集中。 在原理图中框选原理图&#xff0c;然后按 T S,会跳转到指定pcb&#xff0c;并选择上相应封装&#xff0c;此时按 T O L,再次画一个矩形&#xff0c;刚才选中的封装就会汇集到一起。 三、隐藏飞线 在PCB界面…

笔记本双系统win10+Ubuntu 20.04 无法调节亮度亲测解决

sudo add-apt-repository ppa:apandada1/brightness-controller sudo apt-get update sudo apt-get install brightness-controller-simple 安装好后找到一个太阳的图标&#xff0c;就是这个软件&#xff0c;打开后调整brightness&#xff0c;就可以调整亮度&#xff0c;可…

Unity XR Interaction Toolkit 开发教程(2):导入 SDK【3.0 以上版本】

文章目录 &#x1f4d5;课程总结&#x1f4d5;安装 Unity 编辑器与打包模块&#x1f4d5;导入 OpenXR&#x1f4d5;导入 XR Interaction Toolkit&#x1f4d5;打包发布 获取完整课程以及答疑&#xff0c;工程文件下载&#xff1a; https://www.spatialxr.tech/ 视频试看链接&a…

Python中的字符串“不可改变。/可以改变?”

Python中&#xff0c;规定字符串是“不可变”类型&#xff0c;字符串方法可以“重写”字符串。Python最终让您明白&#xff0c;“字符串不可改变”。&#x1f60e; (笔记模板由python脚本于2024年11月01日 17:55:57创建&#xff0c;本篇笔记适合熟悉python础数据类型str的coder…

5天学习RAG路线图,你信吗?

RAG是"Retrieval Augmented Generation"的缩写&#xff0c;让我们来拆解这个术语&#xff0c;了解RAG的本质&#xff1a; R -> Retrieval&#xff08;检索&#xff09; A -> Augmented&#xff08;增强&#xff09; G -> Generation&#xff08;生成&…

tkinter 走进现代化【一】 - 登录页

import customtkinter as ctk from PIL import Image, ImageTk from tkinter import messagebox import timeclass LoginApp(ctk.CTk):def __init__(self):super().__init__()self.title("登录页面")self.geometry("600x400")self.resizable(False, False)…

实时特征框架的生产实践|得物技术

一、业务背景 使用场景 推荐系统在当今的互联网应用中扮演着至关重要的角色&#xff0c;它极大地丰富了用户体验&#xff0c;帮助用户在海量信息中发现和探索他们可能感兴趣的内容。然而&#xff0c;随着数据量的激增和用户需求的日益多样化&#xff0c;传统的离线推荐系统已…

vue3+vant实现视频播放(含首次禁止进度条拖拽,视频看完后恢复,保存播放视频进度,刷新及下次进入继续播放,判断视频有无全部看完等)

1、效果图 2、 <div><videocontrolsclass"video_player"ref"videoPlayer":src"videoSrc"timeupdate"handleTimeUpdate"play"onPlay"pause"onPause"ended"onVideoEnded"></video><…

【设计模式系列】迭代器模式(七)

一、什么是迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供一种方法来顺序访问一个聚合对象中的各个元素&#xff0c;而不暴露其内部的表示。迭代器模式将集合的遍历过程封装在一个独立的迭代器对象中&#xff0c;这样…

硅谷甄选(10)用户管理

用户管理模块 9.1 静态搭建 主要是el-form、el-pagination <template><el-card style"height: 80px"><el-form :inline"true" class"form"><el-form-item label"用户名:"><el-input placeholder"请…

BGP路径属性与路由反射器

前言 IBGP水平分割规则用于防止AS内部产生环路&#xff0c;在很大程度上杜绝了IBGP路由产生环路的可能性&#xff0c;但是同时也带来了新的问题&#xff1a;BGP路由在AS内部只能传递一跳&#xff0c;如果建立IBGP对等体全互联模型又会加重设备的负担。 BGP 路径属性 AS_Path …

EtherCAT转ModbusTCP相关技术

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 MS-GW15 概述 MS-GW15 是 EtherCAT 和 Modbus TCP 协议转换网关&#xff0c;为用户提供一种 PLC 扩展的集成解决方案&#xff0c;可以轻松容易将 Modbu…

如何防止U盘盗取电脑数据?

数据安全无论是对企业还是个人都至关重要。这些用户群体随时面临着数据被窃取的风险&#xff0c;而 U 盘则成为了潜在的安全隐患。如果你想要禁止电脑上使用 这类USB 存储设备&#xff0c;看完这篇文章&#xff0c;防止 U 盘盗取数据并非难事。 禁止使用usb存储设备 打开电脑上…

二叉树选择题

一 . 相关性质 1 &#xff09; 对于任何一棵二叉树 &#xff0c; 如果度数为 0 ---> 其叶子结点个数为 , 度数为2的分支结点个数为 &#xff0c;则有 2 ) 树的结点总数 n 3 ) 有 n 个结点 &#xff0c; 则边数为 n - 1 4 ) 满二叉树 &#xff1a;&#xff08;k 层) 结…

【急救】——心肺复苏和AED使用以及海姆立克法

【急救】——心肺复苏和AED使用以及海姆立克法 法律保障成人CPR实施步骤1.确保现场环境安全和自身安全2.呼唤确认救助对象状况&#xff0c;通过轻拍肩膀&#xff0c;触摸腹部数10个数识别呼吸***3.呼喊求助***4.找到按压位置5.按照标准要求按压什么时候停止CPR(心肺复苏&#x…

【小白学机器学习28】 统计学脉络+ 总体+ 随机抽样方法

目录 参考书&#xff0c;学习书 0 统计学知识大致脉络 1 个体---抽样---整体 1.1 关于个体---抽样---整体&#xff0c;这个三段式关系 1.2 要明白&#xff0c;自然界的整体/母体是不可能被全部认识的 1.2.1 不要较真&#xff0c;如果是人为定义的一个整体&#xff0c;是可…

Qgis 开发初级 《ToolBox》

Qgis 有个ToolBox 的&#xff0c;在Processing->ToolBox 菜单里面&#xff0c;界面如下。 理论上Qgis这里面的工具都是可以用脚本或者C 代码调用的。界面以Vector overlay 为例子简单介绍下使用方式。Vector overlay 的意思是矢量叠置分析&#xff0c;和arcgis软件类似的。点…