VUE3学习 第七章 了解UI库ElementUI、Vant等、Scoped和样式 穿透、css Style完整新特性、Vue3集成Tailwind CSS、vscode插件、执行机制nextTick
一、了解UI库ElementUI，AntDesigin等
vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀的UI组件库供大家参考
这几套框架主要用于后台管理系统和移动端的制作，方便开发者快速开发
1. Element UI Plus
Vue 3 UI 框架 | Element Plus
- 安装方法
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
- main ts 引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
- volar 插件支持
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
2. Ant Design Vue
Ant Design Vue
- 安装
$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next
- 使用
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd).mount('#app');
3. Iview
iView / View Design 一套企业级 UI 组件库和前端解决方案
- 安装
npm install view-ui-plus --save
- 使用
import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'
const app = createApp(App)
app.use(store)
.use(router)
.use(ViewUIPlus)
.mount('#app')
4. Vant 移动端
Vant 3 - Lightweight Mobile UI Components built on Vue
- 安装
npm i vant -S
- 使用
import Vant from 'vant'
import 'vant/lib/index.css';
createApp(App).use(vant).$mount('#app)
二、Scoped和样式 穿透 :deep()
主要是用于修改很多vue常用的组件库（element, vant, AntDesigin），虽然配好了样式但是还是需要更改其他的样式
就需要用到样式穿透
scoped的原理
vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。
总结一下scoped三条渲染规则：
- 给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性
- 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式
- 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了’样式模块化’的效果.
1. vue3 的 :deep()
修改Element ui Input样式，发现没有生效，但是 如果不写 scoped 就没有问题，
原因就是Scoped 他在进行PostCss转化的时候把元素选择器默认放在了最后
所以 Vue 提供了样式穿透:deep() 他的作用就是用来改变 属性选择器的位置
<style scoped lang="less">
.aaa {
:deep(input) { // 这是 v3的写法 v2 是 /keep/
background: red
}
}
</style>
三、css Style完整新特性
1. 插槽选择器 :slotted()
大概就是 在A组件中 定义了 一个 slot 插槽
然后去 父组件中 引入了A 并且 给插槽 位子 放了 一个 div 给了个 class a
但是 此时 你无法在 A组件中 直接去 修改 class a 这时就要用到 插槽选择器
默认情况下，作用域样式不会影响到 < slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的
A组件
<template>
<div>
我是插槽
<slot></slot>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.a{ // 想在 A组件中 修改插槽的 样式 这样是 没效果的
color:red
}
:slotted(.a) { // 这里需要用到这个插槽组件
color:red
}
</style>
APP.vue组件
<template>
<div>
<A>
<div class="a">私人定制div</div>
</A>
</div>
</template>
<script setup>
import A from "@/components/A.vue"
</script>
<style lang="less" scoped>
</style>
2. 全局选择器 :global (一般用不到)
在之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案
<style> // 以前 要写 两个 style 现在只用写一个了 用下面的全局选择器
div{
color:red
}
</style>
<style lang="less" scoped>
</style>
<style lang="less" scoped>
:global(div){
color:red
}
</style>
3. 动态 CSS
- 单文件组件的 < style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：( 如果是对象 v-bind 请加引号)
<template>
<div class="div">
小满是个弟弟
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const red = ref<string>('red')
const pink = ref({color: 'pink'})
</script>
<style lang="less" scoped>
.div{
color:v-bind(red) // 这里 如果是简单数据 可以直接写
}
.div{
color:v-bind('pink.color') // 如果是对象 v-bind 请加引号
}
</style>
4. css module
- < style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类作为 $style 对象的键暴露给组件
<template>
<div :class="$style.red">
弟弟
</div>
</template>
<style module>
.red {
color: red;
font-size: 20px;
}
</style>
- 自定义注入名称（多个可以用数组）
你可以通过给 module attribute 一个值来自定义注入的类对象的 property 键
<template>
<div :class="[zs.red,zs.border]"> // 多个 用数组表示
弟弟
</div>
</template>
<style module="zs"> // 这里 可以自定义名称，
.red {
color: red;
font-size: 20px;
}
.border{
border: 1px solid #ccc;
}
</style>
- 与组合式 API 一同使用
注入的类可以通过 useCssModule API 在 setup() 和 < script setup> 中使用。对于使用了自定义注入名称的 < style module> 模块，useCssModule 接收一个对应的 module attribute 值作为第一个参数
<template>
<div :class="[zs.red,zs.border]">
弟弟
</div>
</template>
<script setup lang="ts">
import { useCssModule } from 'vue'
const css = useCssModule('zs') // 这里 利用 useCssModule
</script>
<style module="zs">
.red {
color: red;
font-size: 20px;
}
.border{
border: 1px solid #ccc;
}
</style>
使用场景一般用于TSX 和 render 函数 居多
四. Vue3集成Tailwind CSS
Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的
官网地址Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站
对于PostCSS的插件使用，我们再使用的过程中一般都需要如下步骤：
- PostCSS 配置文件 postcss.config.js，新增 tailwindcss 插件。
- TaiWindCss插件需要一份配置文件，比如:tailwind.config.js。
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网
postCss 功能介绍
- 增强代码的可读性 （利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。）
- 将未来的 CSS 特性带到今天！（PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。）
- 终结全局 CSS（CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。）
- 避免 CSS 代码中的错误（通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。）
postCss 处理 tailWind Css 大致流程
- 将CSS解析成抽象语法树(AST树)
- 读取插件配置，根据配置文件，生成新的抽象语法树
- 将AST树”传递”给一系列数据转换操作处理（变量数据循环生成，切套类名循环等）
- 清除一系列操作留下的数据痕迹
- 将处理完毕的AST树重新转换成字符串
安装
- 初始化项目
npm init vue@latest - 安装 Tailwind 以及其它依赖项
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest - 生成配置文件 （配置 - Tailwind CSS 中文文档）
npx tailwindcss init -p - 修改配置文件 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: [],
}
- 在 src 下 创建一个index.css ， 并在 main中 引入他 最后 npm run dev 就可以使用了
@tailwind base;
@tailwind components;
@tailwind utilities;
- 用法样式
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="http://n.sinaimg.cn/translate/20170815/OoVn-fyixtym5144510.jpg" alt="Man looking at item at a store">
</div>
</div>
</div>
五. vscode Volar ts插件
随着VsCode开源免费，丰富的插件，也是深受前端开发人员爱戴，在我们使用VsCode开发vue2的时候经常会下载一个插件vetur ，帮我们提供良好的代码智能提示
在当vue3.2发布完之后 vetur 并不能给我们提供良好的代码提示，所以volar顺应而生
Volar 与他配套的还有（TypeScript Vue Plugin(volar)）
与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能（使用的时候需要把vetur 设置为禁用状态）
六. Evnet Loop 和 nextTick
1. JS 执行机制
在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了，所以这个语言是单线程的但是随着HTML5到来js也支持了多线程webWorker 但是也是不允许操作DOM
单线程就意味着所有的任务都需要排队，后面的任务需要等前面的任务执行完才能执行，如果前面的任务耗时过长，后面的任务就需要一直等，一些从用户角度上不需要等待的任务就会一直等待，这个从体验角度上来讲是不可接受的，所以JS中就出现了异步的概念。
2. 同步任务
代码从上到下按顺序执行
3. 异步任务
1.宏任务
script(整体代码)、setTimeout、setInterval、UI交互事件、postMessage、Ajax
2.微任务
Promise.then catch finally、MutaionObserver、process.nextTick(Node.js 环境)
运行机制
所有的同步任务都是在主进程执行的形成一个执行栈，主线程之外，还存在一个"任务队列"，异步任务执行队列中先执行宏任务，然后清空当次宏任务中的所有微任务，然后进行下一个tick如此形成循环。
nextTick 就是创建一个异步任务，那么它自然要等到同步任务执行完成后才执行。
<template>
<div ref="xiaoman">
{{ text }}
</div>
<button @click="change">change div</button>
</template>
<script setup lang='ts'>
import { ref,nextTick } from 'vue';
const text = ref('开飞机')
const xiaoman = ref<HTMLElement>()
const change = async () => {
text.value = '不开飞机'
console.log(xiaoman.value?.innerText) // 开飞机 vue的dom更新是异步的 所以 还没有刷新
await nextTick();
console.log(xiaoman.value?.innerText) // 不开飞机
}
</script>
<style scoped>
</style>
具体源码要去看视频讲解