1.4k 字 1 分钟

UnoCSS 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎 。

参考：Vite 安装 UnoCSS 官方文档

1.2k 字 1 分钟

Element Plus 2.2.0 版本开始支持暗黑模式，启用方式参考 Element Plus 官方文档 - 暗黑模式， 官方也提供了示例 element-plus-vite-starter 模版 。

这里根据官方文档和示例讲述如何使用 VueUse 的 useDark 方法实现暗黑模式的动态切换。

548 字 1 分钟

官网 # 1. 安装依赖 执行 pnpm create stylelint# orpnpm init stylelint将会生成 .stylelintrc.json 文件，自动安装 stylelint 和 stylelint-config-standard 依赖 # 2. 安装规则配置文件 执行 pnpm add stylelint-config-recommended-less stylelint-config-standard-vue less -D stylelint-config-recommended-less -- less...
2.5k 字 2 分钟

Vite 环境变量主要是为了区分开发、测试、生产等环境的变量

参考：

  • Vite 环境变量配置官方文档
  • vite 环境变量

1.4k 字 1 分钟

相对路径别名配置，使用 @ 代替 src

# 一、安装 @types/node

import path from 'path' 时，vscode 会出现波浪线，编译时会报错：TS2307: Cannot find module 'path' or its corresponding type declarations.

安装 @types/node 即可

pnpm i @types/node -D

4k 字 4 分钟

# 基本配置

import { createRouter, createWebHistory } from 'vue-router';
import pinia from './pinia';
import { useUserStore } from '../store/user';
const user = useUserStore(pinia);
// 不需要权限的页面
const constantRoutes = [
  {
    // 登录
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
  },
  {
    // 404
    path: '/:pathMatch(.*)',
    name: 'notFound',
    component: () => import('../views/error/notFound.vue')
  },
  {
    // 无权限
    path: '/noPermission',
    name: 'noPermission',
    component: () => import('../views/error/noPermission.vue')
  }
];
const asyncRoutes = {
  path: '/',
  name: 'main',
  component: () => import('../views/mainPage.vue'),
  children: [
    {
      // 首页
      path: '/',
      name: 'home',
      component: () => import('../views/home/index.vue')
    },
    {
      // 用户管理
      path: '/settingUser',
      name: 'settingUser',
      component: () => import('../views/setting/user.vue')
    }
  ]
};
const router = createRouter({
  history: createWebHistory('/'),
  routes: constantRoutes
});
router.addRoute(asyncRoutes);
router.beforeEach((to, from, next) => {
  // 切换 router 时，取消 pending 中的请求
  if (window.__axiosPromiseArr) {
    window.__axiosPromiseArr.forEach((ele, ind) => {
      ele.cancel();
      delete window.__axiosPromiseArr[ind];
    });
  }
  //token 过期
  if (localStorage.getItem('expires') && (new Date().getTime() - localStorage.getItem('expires')) / 1000 > 1) {
    this.$message.error('登录失效，请重新登录', () => {
      localStorage.removeItem('userInfon');
      localStorage.removeItem('token');
      localStorage.removeItem('expires');
      location.href = '/login';
    });
    return;
  }
  // 登录判断
  if (user.token) {
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
      // 权限判断
      next();
    }
  } else {
    if (to.path === '/login') {
      next();
    } else {
      next({ name: 'login' });
    }
  }
});
// 跳转完成后，将滚动条位置重置
router.afterEach(to => {
  window.scrollTo(0, 0);
});
export default router;
   253 字  1 分钟
# Vite 首屏加载慢 (白屏久)
问题描述
Vite 项目启动很快，但首次打开界面加载慢？
参考文章：为什么有人说 vite 快，有人却说 vite 慢
vite 启动时，并不像 webpack 那样做一个全量的打包构建，所以启动速度非常快。启动以后，浏览器发起请求时， Dev Server 要把请求需要的资源发送给浏览器，中间需要经历预构建、对请求文件做路径解析、加载源文件、对源文件做转换，然后才能把内容返回给浏览器，这个时间耗时蛮久的，导致白屏时间较长。
   7.2k 字  7 分钟
vue-router4x 相对于 vue-router3x 除了新增了组合式 API 以外，还删除或变动了不少地方。
单独列出来变动点太杂乱。这里系统性的把项目中经常能用到的知识点进行整理.