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

2.5k 字 2 分钟

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

参考：

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

7.2k 字 7 分钟

vue-router4x 相对于 vue-router3x 除了新增了组合式 API 以外，还删除或变动了不少地方。

单独列出来变动点太杂乱。这里系统性的把项目中经常能用到的知识点进行整理.

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 要把请求需要的资源发送给浏览器，中间需要经历预构建、对请求文件做路径解析、加载源文件、对源文件做转换，然后才能把内容返回给浏览器，这个时间耗时蛮久的，导致白屏时间较长。
   428 字  1 分钟
# 1. 新建 src/typings.d.ts（在 src 文件夹下新建）
// 声明 window 上自定义属性，如事件总线
declare interface Window {
  eventBus: any;
}
// 声明.vue 文件
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<object, object, any>;
  export default component;
}
提示：遇到 ts 报错，有些时候是配置未生效，可以重启 vscode 或 ts 服务（vscode 快捷键 ctrl+shift+p 调出命令行，输入 Restart TS Server）
   3k 字  3 分钟
# 一、字体渐变
  • -webkit-background-clip:text; 和 background-clip:text; 是关键属性，将背景只应用到文本的形状上。
  • 注意：把当前元素设置为行内块，以便能够应用背景
# HTML
<div class="text-gradient">这是一段测试文字</div>
# CSS
.text-gradient {
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image: linear-gradient(45deg, blue, red);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非 Webkit 内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
    }
   4k 字  4 分钟
每个前端人都经历过的一个痛处就是，在写页面 ui 样式时不停的在 html 文件（或代码区域）和 css 文件（或代码区域）之间来回切换，这种聚焦点分离让 ui 样式的开发有点点烦。原子化 css 正是这一痛处的有效的解决方案。 # 简介 原子化的优点也即原子化，因为所有书写的 css 都是以最原子的形态出现，所以可复用性无解肥。 原子化中每个 css 属性和值都有一个对应简写的 class 来实现，通常这些简写也符合认知规律，所以书写起来并没有很大心智负担，熟能生巧（唯手熟耳）。 这有点类似在 html 中书写 style，不过更加简单和快捷。比如： w-10 就是 width:...
   4.9k 字  4 分钟
在 UnoCSS 的官网首页，已经为我们展示了它的优点
  1. 没有核心实用程序。所有功能均通过预设提供。
  2. 瞬间。无需解析、无需 AST、无需扫描。它比 Windi CSS 或 TailWind JIT 快 5 倍。
  3. 轻量级。零 deps 和浏览器友好：~6kb min+brotli。
  4. 丰富的集成。一流的 Vite、Webpack、PostCSS、CLI、VS Code、ESLint 等支持。
  5. 快捷方式。动态地对实用工具进行别名或分组。
  6. 属性模式。将实用工具分组放置在属性中。
  7. 纯 CSS 图标。使用单个类名作为任意图标。
  8. 变体组。使用常见前缀的快捷方式来组合实用工具。
  9. CSS 指令。使用 @apply 指令在 CSS 中重用实用工具。
  10. 编译模式。在构建时将多个类合成为一个类。
  11. 检查器。交互式地进行检查和调试。
  12. CDN 运行时构建。使用一行 CDN 引入代码即可使用 UnoCSS。
如上已经说的很全面了，UnoCSS 的设计理念是简洁易用，提供了一套直观和易于记忆的类名，使得开发人员能够快速编写和理解样式代码。它遵循类似于 Tailwind CSS 的风格，使用直观的命名规则来描述样式的作用。而且 Antfu 大佬也是 Tailwind 的作者之一。