Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性

目录

1. 常见的 Vue UI 库

1.1 ElementPlus

1.2 Ant Design Vue

1.3 iView

1.4 Vant

2. scoped 、样式穿透

2.1 scoped 渲染规则

2.2 样式穿透

3. Vue3 样式新特性

3.1 插槽选择器 :slotted()

3.2 全局选择器 :global()

3.3 动态样式绑定

3.4 css module

4. Tailwind Css

4.1 基本介绍及优点分析

4.2 PostCss 处理 Tailwind Css 基本流程

4.3 使用 Tailwind Css 栗子

4.3.1 初始化项目

4.3.2 安装 Tailwind Css

4.3.3 执行命令，生成两个配置文件

4.3.4 修改配置文件 tailwind.config.js

4.3.5 创建 index.css，并在 main.ts 中引入

5. unocss 原子化

5.1 什么是 unocss 原子化

5.2 unocss 原子化参考资料

---

1. 常见的 Vue UI 库

1.1 ElementPlus

快速开始 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/guide/quickstart.html

使用 setup 语法糖 + ts

独特优势：支持 Volar 插件，配置 tsconfig.json 后可以实现代码提示

1.2 Ant Design Vue

https://www.antdv.com/docs/vue/getting-started-cnhttps://www.antdv.com/docs/vue/getting-started-cn使用 setup() 函数

独特优势：表格组件更符合业务，和分页结合起来啦

1.3 iView

https://www.iviewui.com/view-ui-plus/guide/starthttps://www.iviewui.com/view-ui-plus/guide/start

使用 options API 

独特优势：每个 demo 都非常的详细

1.4 Vant

Vant 4 - Lightweight Mobile UI Components built on VueLightweight Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

使用 setup() 函数，是移动端组件库

独特优势：适用于电商类项目，把常见的优惠券等业务抽成了组件

2. scoped 、样式穿透

用于修改 Vue 相关的组件库（ElementPlus、AntDesign、Vant）

2.1 scoped 渲染规则

scoped 在 DOM 结构、CSS 样式上，增加唯一标识（形如 data-v-hash），达到样式私有化、样式模块化（PostCSS 转译实现）

scoped 三条渲染规则：

• PostCSS 给 HTML 的 DOM 节点，加不重复的 data 属性（形如 data-v-xxx）确保类名唯一
• PostCSS 在每句 CSS 选择器的末尾（编译后生成的 css）加当前组件的 data 属性选择器
• 如果组件内部包含有其他组件，只会给其他组件的最外层标签，加上当前组件的 data 属性

2.2 样式穿透

不使用样式穿透，属性选择器就永远在最后；使用样式穿透，就能改变属性选择器的位置；

不用任何样式穿透，无法直接在 scoped 中修改 ElementPlus 类名

 

Vue2 中使用 /deep/ 进行样式穿透

Vue3 中使用 :deep() 进行样式穿透

 

3. Vue3 样式新特性

3.1 插槽选择器 :slotted()

带插槽的子组件：

• 默认情况下，子组件内，无法修改 未来 slot 中出现的类名
• 可以使用 插槽选择器 :slotted() 修改未来 slot 中出现的类名

父组件中的类名，会覆盖子组件中的插槽选择器：

 

 

3.2 全局选择器 :global()

如果想在单个 .vue 文件里增加全局样式，可以通过删除 scoped 实现，这样不够优雅

可以通过 :global() 全局选择器，在不删除 scoped 的情况下，增加全局样式

 

3.3 动态样式绑定

通过 v-bind 可以绑定变量，实现动态 css

如下所示：

• 新增响应式变量 color，新增按钮
• 点击按钮后，改变 color 的值，.test 类名的 div 随之改变背景色

 

如果响应式变量是对象形式，则需要在 v-bind 中加单引号

 

 

3.4 css module

使用场景 —— 此功能一般用于 tsx、render 函数

在 style 标签上，新增 module；

在样式处，新增默认名字 $style，在他的后面加真正的类名；

如果有多个类名，则用数组

 可以给模块指定名字，并通过 Vue3 内置 hoos useCssModule() 获取类名列表

4. Tailwind Css

4.1 基本介绍及优点分析

Tailwind Css 是由 JavaScript 编写的 Css 框架，基于PostCss 解析

Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站。Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。https://www.tailwindcss.cn/

优点分析：

• 类名驱动文档
• 生产环境体积很小，编译后只有 8.7KB
• 支持 栅格、hover/focus、深色模式等
• 可以通过 apply 指令实现自定义类名
• 支持前沿样式属性，比如很多浏览器不支持 grid 属性，但此框架帮我们做了转换
• 写代码时在 VSCode 里有提示

4.2 PostCss 处理 Tailwind Css 基本流程

PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网PostCSS 利用 JavaScript 的强大编程能力对 CSS 代码进行转换。数以百计的 PostCSS 插件可以用来为 CSS 属性添加特定于浏览器厂商的前缀、支持未来 CSS 语法、模块化、代码检测等。https://www.postcss.com.cn/

PostCss 功能介绍：

• 增强代码的可读性 （利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。）
• 将未来的 CSS 特性带到今天！（PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。）
• 终结全局 CSS（CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。）
• 避免 CSS 代码中的错误【类似 eslint】（通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。）

PostCss 处理 Tailwind Css 基本流程，原理类似于 —— 虚拟 DOM 解析

• 将CSS解析成抽象语法树(AST树)
• 读取插件配置，根据配置文件，生成新的抽象语法树
• 将 AST 树 ”传递” 给一系列数据转换操作处理（变量数据循环生成，切套类名循环等）
• 清除一系列操作留下的数据痕迹
• 将处理完毕的 AST 树重新转换成字符串

4.3 使用 Tailwind Css 栗子

在 vscode 中，安装 Tailwind Css 插件，增加代码提示

4.3.1 初始化项目

npm init vue@latest

 

4.3.2 安装 Tailwind Css

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

 

4.3.3 执行命令，生成两个配置文件

• postcss.config.js
• tailwind.config.js

npx tailwindcss init -p 

配置文档参考：配置 - Tailwind CSS 中文文档

4.3.4 修改配置文件 tailwind.config.js

2.6版本

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.0版本

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.3.5 创建 index.css，并在 main.ts 中引入

创建 index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

5. unocss 原子化

5.1 什么是 unocss 原子化

重新构想原子化CSS - 知乎感谢印记中文的 @QC.L 对本文进行翻译，英文原文: English Version。 本文会比往期文章相对长些。这是我个人的一个重大的工具发布，有许多内容我想谈论。如果你能花些时间读完，不胜感激，希望能对你有所帮助 :)什…https://zhuanlan.zhihu.com/p/425814828

减少了 css 体积，提高了 css 复用（重复的样式不用写了，直接用现有类名）

减少起名的复杂度（比如 margin-top，就简写成 mt）

增加了记忆成本，将 css 拆分为原子之后，就必须要记住一些 class 才能书写（比如 background，开头是 bg）

5.2 unocss 原子化参考资料

由于个人感觉此模块在实际项目中应用很少，所以不做记录，但是为了以防万一，先记下来之前看过的文章及视频，讲的非常清晰，给大佬点赞~~

小满Vue3（第三十七章 unoCss原子化）_哔哩哔哩_bilibili小满Vue3（第三十七章 unoCss原子化）是Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的第49集视频，该合集共计110集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1dS4y1y7vd?p=49&vd_source=8bc01635b95dbe8ecd349b2c23b03a10

小满Vue3第三十七章（unocss原子化）_小满zs的博客-CSDN博客CSS原子化的优缺点1.减少了css体积，提高了css复用2.减少起名的复杂度3.增加了记忆成本 将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss提供了完善的工具链，你写background，也要记住开头是bg安装 vite.config.ts main.ts 引入 配置静态css配置动态css（使用正则表达式）m-参数*10 例如 m-10 就是 margin:100px shortcuts 可以自定义组合样式 unocss https://xiaoman.blog.csdn.net/article/details/125650172