vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考
这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发
Vue 3 UI 框架 | Element Plus
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
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')
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
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');
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')
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)
主要是用于修改很多vue常用的组件库(element, vant, AntDesigin),虽然配好了样式但是还是需要更改其他的样式
就需要用到样式穿透
scoped的原理
vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式私有化模块化的目的。
总结一下scoped三条渲染规则:
PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了’样式模块化’的效果.
修改Element ui Input样式,发现没有生效,但是 如果不写 scoped 就没有问题,
原因就是Scoped 他在进行PostCss转化的时候把元素选择器默认放在了最后
所以 Vue 提供了样式穿透:deep() 他的作用就是用来改变 属性选择器的位置
<style scoped lang="less">
.aaa {
:deep(input) { // 这是 v3的写法 v2 是 /keep/
background: red
}
}
</style>
大概就是 在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>
在之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案
<style> // 以前 要写 两个 style 现在只用写一个了 用下面的全局选择器
div{
color:red
}
</style>
<style lang="less" scoped>
</style>
<style lang="less" scoped>
:global(div){
color:red
}
</style>
<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>
<template>
<div :class="$style.red">
弟弟
</div>
</template>
<style module>
.red {
color: red;
font-size: 20px;
}
</style>
<template>
<div :class="[zs.red,zs.border]"> // 多个 用数组表示
弟弟
</div>
</template>
<style module="zs"> // 这里 可以自定义名称,
.red {
color: red;
font-size: 20px;
}
.border{
border: 1px solid #ccc;
}
</style>
注入的类可以通过 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 函数 居多
Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的
官网地址Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站
对于PostCSS的插件使用,我们再使用的过程中一般都需要如下步骤:
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网
postCss 功能介绍
postCss 处理 tailWind Css 大致流程
// 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: [],
}
@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开源免费,丰富的插件,也是深受前端开发人员爱戴,在我们使用VsCode开发vue2的时候经常会下载一个插件vetur ,帮我们提供良好的代码智能提示
在当vue3.2发布完之后 vetur 并不能给我们提供良好的代码提示,所以volar顺应而生
Volar 与他配套的还有(TypeScript Vue Plugin(volar))
与vetur相同,volar是一个针对vue的vscode插件,不过与vetur不同的是,volar提供了更为强大的功能(使用的时候需要把vetur 设置为禁用状态)
在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来js也支持了多线程webWorker 但是也是不允许操作DOM
单线程就意味着所有的任务都需要排队,后面的任务需要等前面的任务执行完才能执行,如果前面的任务耗时过长,后面的任务就需要一直等,一些从用户角度上不需要等待的任务就会一直等待,这个从体验角度上来讲是不可接受的,所以JS中就出现了异步的概念。
代码从上到下按顺序执行
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>
具体源码要去看视频讲解