安装nodemon插件运行不起来
npm i -g nodemon
vue3路由跳转时的过渡效果
将router-view 抽离成单个组件
<template>
<!-- 路由组件出口的位置 -->
<router-view v-slot="{ Component }">
<transition name="fade">
<!-- 渲染layout一级路由组件的子路由 -->
<component :is="Component" />
</transition>
</router-view>
</template>
<script setup lang="ts">
</script>
<script lang="ts">
export default {
name: "Main"
}
</script>
<style scoped>
.fade-enter-from {
opacity: 0;
transform: scale(0);
}
.fade-enter-active {
transition: all .3s;
}
.fade-enter-to {
opacity: 1;
transform: scale(1);
}
</style>
这时要注意路由跳转的组件要有根标签
<template>
<!-- 添加过渡动画，要有根标签 -->
<div>
permission
</div>
</template>
路由官网： router.vuejs.org/zh/guide/ad…
css背景图片填充
.container {
height: 89vh;
background-image: url("./images/综合泵房.jpg"); /* 替换为你的背景图片路径 */
background-repeat: no-repeat; /* 设置平铺，可选值为: repeat | repeat-x | repeat-y | no-repeat */
background-size: 100% 100%; /* 铺满范围，并保持宽高比例 */
/* 其他样式属性... */
}
ruoyi页面切换时不刷新某个路由的页面
保持路由的name和组件的name相同，且首字母大写
注意，这样当前组件不会刷新，即使传给当前组件的数据发生变化，也不会刷新，所以，尽量使用params传参的方式。
因为这样会重新打开多个页面。（使用query参数，只能打开一个页面）
注意使用params就不要使用path属性来导航，使用name属性
ruoyi关闭当前页面
this.$closePage();
父组件异步获取的数据传递给子组件
注意.env文件里面变量的格式，等号两边要有空格，且注意VUE_APP_XXX的才可以被peocess.env拿到
#
# 编译时(node 端)可用的：process.env.*
# 运行时(客户端)可用的：process.env.NODE_ENV、process.env.BASE_URL、process.env.VUE_APP_*
#
# BASE_URL 需要尾斜杠，接口前缀不需要尾斜杠
# BASE_URL 也可以生成为相对路径，详见：https://cli.vuejs.org/zh/config/#publicpath
#
port = 9303
NODE_ENV = development
VUE_APP_ENV = dev
BASE_URL = /
VUE_APP_BASE_API = /api/web-api
VUE_APP_ENABLE_DOCS = true
VUE_APP_FILE_UPLOAD_HOST = /api/web-api
# kkFile 预览路径
VUE_APP_KK_FILE_PATH = 'http://127.0.0.1:8012'
VUE_APP_FILE_PATH = 'http://127.0.0.1:9303'
# css 源码映射
DEV_CSS_SOURCEMAP = false
# css 自动加前缀 (进行兼容性调试时再启用)
DEV_CSS_AUTOPREFIXER = false
# 接口服务 (给 devServer.proxy 使用)
# DEV_PROXY_TARGET_API = 'http://127.0.0.1:9301'
DEV_PROXY_TARGET_API = 'http://192.168.2.101:9301'
#DEV_PROXY_TARGET_API = 'http://192.168.2.90:9301'
# 视频
VUE_APP_VIDEO = 'http://192.168.2.101:9301'
# 页面标题
VUE_APP_TITLE = 浙能兰电运行部管理平台
动态增加样式style和class
:style="{'border-radius': radius + 'px'}"
:class="['left-scroll-view-item', i === active ? 'active' : '']"
