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的集合）