Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性
Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性
目录
4.2 PostCss 处理 Tailwind Css 基本流程
4.3.4 修改配置文件 tailwind.config.js
4.3.5 创建 index.css，并在 main.ts 中引入
1. 常见的 Vue UI 库
1.1 ElementPlus
https://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-cn
https://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
https://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 中出现的类名
<template>
<div>
插槽组件
<slot></slot>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
// 没效果
.parent-custom {
color: red;
}
// 有效果
:slotted(.parent-custom) {
color: red;
}
</style>
父组件中的类名，会覆盖子组件中的插槽选择器：
<template>
<div>
<test-comp>
<div class="parent-custom"> 父组件插入了内容 </div>
</test-comp>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TestComp from './Comp.vue';
</script>
<style scoped>
.parent-custom {
color: green;
}
</style>
3.2 全局选择器 :global()
如果想在单个 .vue 文件里增加全局样式，可以通过删除 scoped 实现，这样不够优雅
<template>
<div>
<!-- test-comp 里面包含了 section -->
<test-comp></test-comp>
</div>
</template>
<script lang="ts" setup>
import TestComp from './Comp.vue';
</script>
<style>
/* 通过删除 scoped 实现增加全局样式 */
section {
width: 100px;
height: 100px;
background: red;
}
</style>
可以通过 :global() 全局选择器，在不删除 scoped 的情况下，增加全局样式
<template>
<div>
<!-- test-comp 里面包含了 section -->
<test-comp></test-comp>
</div>
</template>
<script lang="ts" setup>
import TestComp from './Comp.vue';
</script>
<style scoped>
/*
通过 :global() 全局选择器
在不删除 scoped 的情况下
增加全局样式
*/
:global(section) {
width: 100px;
height: 100px;
background: red;
}
</style>
3.3 动态样式绑定
通过 v-bind 可以绑定变量，实现动态 css
如下所示：
- 新增响应式变量 color，新增按钮
- 点击按钮后，改变 color 的值，.test 类名的 div 随之改变背景色
<template>
<div class="test"></div>
<el-button @click="changeColor">颜色切换</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const color = ref('red');
const changeColor = () => {
color.value = color.value === 'red' ? 'green' : 'red'
};
</script>
<style scoped>
.test {
width: 88px;
height: 88px;
/* 通过 v-bind 可以绑定变量，实现动态 css */
background: v-bind(color)
}
</style>
如果响应式变量是对象形式，则需要在 v-bind 中加单引号
<template>
<div class="test"></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const color = ref({
one: 'red',
two: 'yellow',
});
</script>
<style scoped>
.test {
width: 88px;
height: 88px;
/* 通过 v-bind 可以绑定变量，实现动态 css */
/* 如果是对象，则要加单引号 */
background: v-bind('color.two')
}
</style>
3.4 css module
使用场景 —— 此功能一般用于 tsx、render 函数
在 style 标签上，新增 module；
在样式处，新增默认名字 $style，在他的后面加真正的类名；
<template>
<div class="$style.test"></div>
</template>
<style module>
.test {
background: red;
}
</style>如果有多个类名，则用数组
<template>
<!-- 多个使用数组分割 -->
<div class="[$style.test, $style.uat]"></div>
</template>
<style module>
.test {
background: red;
}
.uat {
border: 1px solid red;
}
</style>可以给模块指定名字，并通过 Vue3 内置 hoos useCssModule() 获取类名列表
<template>
<div class="$mmm.test"></div>
</template>
<script lang="ts" setup>
import { useCssModule } from 'vue'
const classList = useCssModule('mmm')
</script>
<style module="mmm">
.test {
background: red;
}
</style>4. Tailwind Css
4.1 基本介绍及优点分析
Tailwind Css 是由 JavaScript 编写的 Css 框架，基于PostCss 解析
https://www.tailwindcss.cn/优点分析：
- 类名驱动文档
- 生产环境体积很小，编译后只有 8.7KB
- 支持 栅格、hover/focus、深色模式等
- 可以通过 apply 指令实现自定义类名
- 支持前沿样式属性，比如很多浏览器不支持 grid 属性，但此框架帮我们做了转换
- 写代码时在 VSCode 里有提示
4.2 PostCss 处理 Tailwind Css 基本流程
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 原子化
https://zhuanlan.zhihu.com/p/425814828减少了 css 体积，提高了 css 复用（重复的样式不用写了，直接用现有类名）
减少起名的复杂度（比如 margin-top，就简写成 mt）
增加了记忆成本，将 css 拆分为原子之后，就必须要记住一些 class 才能书写（比如 background，开头是 bg）
5.2 unocss 原子化参考资料
由于个人感觉此模块在实际项目中应用很少，所以不做记录，但是为了以防万一，先记下来之前看过的文章及视频，讲的非常清晰，给大佬点赞~~
https://www.bilibili.com/video/BV1dS4y1y7vd?p=49&vd_source=8bc01635b95dbe8ecd349b2c23b03a10
https://xiaoman.blog.csdn.net/article/details/125650172
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
3
0- 0
已为社区贡献4条内容
所有评论(0)