vue 后台管理 指定项目别名

越多越好

---

一、指定项目路径别名

• 在 vite.config.js 里配置

import path from "path"export default defineConfig({resolve:{alias:{"~":path.resolve(__dirname,"src")}},
})

二、全局loading进度条实现

• 安装 nprogress

npm install nprogress// main.js 引入
import "nprogress/nprogress.css"

nprogress.start()     // 进度条开启
nprogress.done()    // 进度条关闭

• 可以再 beforeEach 、 afterEach 路由守卫里开启、关闭

三、动态页面标题的实现

1. 首先，你需要在你的路由配置文件中为每个路由对象添加一个meta字段，并为其设置相应的title属性

const routes = [{path: '/',name: 'Home',component: Home,meta: { title: '首页' } // 添加meta字段，定义标题},{path: '/about',name: 'About',component: About,meta: { title: '关于我们' } // 添加meta字段，定义标题}
]

2. 全局路由守卫 beforeEach，也就是说当路由跳转前，使用路由元信息(meta)设置页面标题

 router.beforeEach((to, from, next) => {if (to.meta.title) {document.title = to.meta.title + ' - 网站名称';} else {document.title = '网站名称';}next();
});

四、全局刷新 和 全屏

• 全局刷新

// js 原生方法
location.reload()

• 全屏
  可以使用 vueuse 提供的 useFullScreen，使用前需要安装 vueuse 及他的核心包

npm i @vueuse/core    // 核心包import { useFullscreen } from '@vueuse/core'
const {isFullscreen,enter,exit,toggle} = useFullscreen()<el-icon class="icon-btn" @click="toggle"><full-screen v-if="!isFullscreen" /><aim v-else />
</el-icon>isFullscreen: 是否是全屏状态
enter:进入全屏
exit:退入全屏
toggle: 半/全屏切换 （enter/exit的集合）