Orange小站

分类： WEB

VUE CSS :deep()选择器使用

By

On 2026年2月25日

In WEB

起因：子组件VueMarkdownIt渲染的表格，格式无法在style scoped里面配置

https://cn.vuejs.org/api/sfc-css-features

v-html动态生成内容以及子组件应当使用deep选择器

Vue+vite+Iconify配置

By

On 2026年1月8日

In WEB

采用unplugin方式而不采用官方vue组件（因为会有第三方请求，图标是动态获取的）

注意，不能用<component :is=”xxx”>方式使用，会无法访问图标（打包时不会被打进去）或者用某种奇技淫巧使得打包时打进相应图标？

以下是G老师给的步骤（已经过验证）

在 Vite + Vue 项目中配置 Iconify 的最佳实践是使用 unplugin-icons。它可以让你像使用 Vue 组件一样使用成千上万个图标，且打包时只会引入你用到的图标（自动 Tree-shaking）。

以下是详细的配置流程：

第一步：安装依赖

你需要安装插件核心以及图标解析器：

Bash

pnpm add -D unplugin-icons unplugin-vue-components @iconify/json
  • unplugin-icons: 核心插件，负责将图标转化为 Vue 组件。
  • unplugin-vue-components: 自动导入插件，让你不需要手动 import 图标组件。
  • @iconify/json: (可选) 包含所有图标数据集。如果你想让插件在编译时自动从网络下载图标，可以不装这个，改用 autoInstall: true。

第二步：配置 vite.config.ts

在 vite.config.ts 中添加以下配置。通过这种配置，你可以直接在模板中使用图标，无需手动导入。

TypeScript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    // 1. 自动导入组件
    Components({
      resolvers: [
        // 2. 自动注册图标组件
        // prefix 用于给图标组件加前缀，比如 <i-fa-solid-user />
        IconsResolver({
          prefix: 'i', 
          enabledCollections: ['fa6-solid', 'fa6-regular'] // 限制使用的集合，提高类型提示速度
        }),
      ],
    }),
    // 3. 图标插件配置
    Icons({
      autoInstall: true, // 如果没安装图标库，它会自动帮你安装
      compiler: 'vue3',  // 针对 Vue3 编译
    }),
  ],
})

第三步：在项目中使用图标

配置完成后，你不需要 import 任何东西。图标组件的命名规则是：{prefix}-{collection}-{icon}。

例如，你想使用 Font Awesome 6 Solid 里的 user 图标：

HTML

<template>
  <div>
    <i-fa6-solid-user style="font-size: 2em; color: skyblue" />
    
    <i-fa6-regular-envelope />
    
    <i-mdi-home />
  </div>
</template>
  • 前缀 (prefix): 我们在配置里设的是 i。
  • 图标库名 (collection): fa6-solid 对应 Font Awesome 6 Solid。
  • 图标名 (icon): user。

第四步：如何查找图标名称？

你可以去 Icones.js.org 搜索引擎：

  1. 搜索你想要的图标（如 “user”）。
  2. 点击进入 Font Awesome 6 Solid 集合。
  3. 点击具体的图标，查看它的名称。

第五步：进阶优化（针对 IDE 提示）

为了让 VSCode 识别这些自动生成的组件而不报错，并在编写代码时提供代码补全，你需要在 tsconfig.json 中添加：

JSON

{
  "compilerOptions": {
    "types": ["unplugin-icons/types/vue"]
  }
}

同时，unplugin-vue-components 会在根目录自动生成一个 components.d.ts 文件，请确保该文件在 tsconfig.json 的 include 范围内。

总结

这种方案之所以能解决你之前的 “体积过大” 问题，是因为：

  1. 零冗余：只有你在模板里写的 <i-fa6-solid-user /> 会被转译成 SVG 嵌入到 JS 中。
  2. 无需字体文件：不再需要加载 .woff 或 .ttf 字体文件，也不需要引入几 MB 的 all.css。
  3. 按需加载：每个图标都是一个独立的微型组件。

Vue(vite ts)+TailwindCSS+FontAwesome初始化指南

By

On 2026年1月6日

In WEB

鉴于初始化了这么多次，每次都忘记，遂记录

Vue

pnpm create vue@latest

略

TailwindCSS

https://tailwindcss.com/docs/installation/using-vite

第6步改为在main.ts中import

import './assets/main.css'; //替换为第三步import了TailwindCSS的文件

注意：主题设置（最新范式）

Tailwind CSS 的最新版本（v4.0）在主题设置上发生了重大的范式转移。与以往在 tailwind.config.js 中编写 JavaScript 对象不同，v4.0 采用了“CSS-first”的配置方式。

现在，你直接在 CSS 文件中通过 CSS 变量 来定义和扩展主题。

1. 核心变化：从 JS 到 CSS

在 v4.0 中，你不再需要频繁切换到配置文件，而是直接在你的主入口 CSS 文件中使用 @theme 指令。

基础设置示例

@import "tailwindcss";

@theme {
  /* 定义新的颜色 */
  --color-brand: #3b82f6;
  --color-accent: #f59e0b;

  /* 扩展或覆盖字体 */
  --font-sans: "Inter", ui-sans-serif, system-ui;

  /* 定义间距 */
  --spacing-128: 32rem;
}

2. 如何设置常见配置

颜色 (Colors)

当你定义 --color-* 变量时，Tailwind 会自动生成对应的类名（如 text-brand 或 bg-brand）。

  • 覆盖： 如果你命名为已有的颜色（如 --color-blue-500），它会覆盖默认值。
  • 新增： 如果是全新命名（如 --color-mint），它会作为扩展添加。

间距与尺寸 (Spacing)

@theme {
  --spacing-header: 5rem;
  --radius-xl: 1.5rem;
}

这会自动生成 h-header 或 rounded-xl 等工具类。

响应式断点 (Screens)

你可以轻松自定义断点：

@theme {
  --breakpoint-3xl: 1920px;
}

3. 为什么这样设计？

  1. 更快的编译速度： 通过 CSS 变量直接控制，减少了 JS 配置解析的开销。
  2. 原生 CSS 体验： 你定义的变量可以在非 Tailwind 的原生 CSS 中直接通过 var(--color-brand) 使用。
  3. 更好的 IDE 支持： VS Code 能够更直观地感知 CSS 变量。

4. 还在用 tailwind.config.js 吗？

虽然 v4 倾向于 CSS 配置，但如果你需要复杂的动态逻辑，或者正在从 v3 迁移，你仍然可以通过指令保留旧配置：

@plugin "./my-legacy-config.js";

注意： 确保你的 Vite 插件已经更新到最新版本，以支持 @import "tailwindcss"; 这种新的导入语法。

FontAwesome

https://docs.fontawesome.com/web/use-with/vue

注意：AddIcon步骤也必须做（即使只使用免费图标）

// in main.ts or main.js
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

const app = createApp(App)

app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)

app.mount('#app')

Add Whole Styles

Free only

If you’re just using the Free icons, the easiest way to get the icons into your app is to add the Free SVG Icon Packages. Here’s an example of how to do that:

/* add fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'/* import all the icons in Free Solid, Free Regular, and Brands styles */
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)

使用：

<FontAwesomeIcon icon="fa-solid fa-caret-down" class="ml-1" />

后续：FontAwesome全部打包，导致包大小很大，建议换Iconify

Powered by WordPress & Theme by Anders Norén