26.elementPlus的使用

// 安装
npm install element-plus --save


// 配置
main.ts中:
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
app.use(ElementPlus)


// 配置提示
tsconfig.json中:
{
  "compilerOptions": {
    "types": ["element-plus/global"]
  },
}

27.样式穿透

v2中用的::v-deep

v3中用:deep(放入,如.el-input__inner) // 暂时没有用过,利用了覆盖

28. 插槽选择器/全局选择器/动态css

插槽选择器:slotted()


// 写一个插槽A,放入app中,注意定义了class为aa
<template>
  <div>
    <A>
      <div class="aa">定制div</div>
    </A>
  </div>
</template>

<script setup lang="ts">
import A from './components/A/index.vue'
</script>



// 插槽A中,使用:slotted设置样式
<template>
    <div>
        <slot></slot>
    </div>
</template>
:slotted(.aa) {
    color: red;
}
</style>

全局选择器:global

// 例
:global(div) {
    color: red;
}

动态css
// v-bind
<template>
    <div class="aa">--A--</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const style = ref("red")
</script>
<style lang="scss" scoped>
.aa {
    color: v-bind(style);
}
</style>

动态css--对象写法
// 如果是对象的话,要加上''
<script setup lang="ts">
import { ref } from "vue"
const style = ref({
    color: "red",
})
</script>
<style lang="scss" scoped>
.aa {
    color: v-bind("style.color");
}
</style>

CSSmodule:常用于TSX/render函数

// 用法一:module+$style
<template>
    <div :class="$style.aa">--A--</div>
    <div :class="[$style.aa, $style.bb]">--B--</div>
</template>

<style lang="scss" module>
.aa {
    color: red;
}

.bb {
    border: 1px solid red;;
}
</style>



// 用法二:自定义名字
<template>
    <div :class="cc.aa">--A--</div>
    <div :class="[cc.aa, cc.bb]">--B--</div>
</template>

<style lang="scss" module="cc">
$border: 1px solid red;
.aa {
    color: red;
}
.bb {
    border: $border;
}
</style>



// 用法三:自定义hooks--useCssModule
// useCssModule + module="cc"
<template>
    <div :class="cc.aa">--A--</div>
    <div :class="[cc.aa, cc.bb]">--B--</div>
</template>

<script setup lang="ts">
    import { useCssModule } from "vue"
    const css = useCssModule("cc")
</script>
<style lang="scss" module="cc">
$border: 1px solid red;

.aa {
    color: red;
}

.bb {
    border: $border;
}
</style>

29.tailWind试用

30.event loop

1.机制

同步任务
    代码从上到下按顺序执行

异步任务
    1.宏任务
        script(整体代码)、setTimeout、setInterval、UI交互事件、postMessage、Ajax
    2.微任务
        Promise.then/catch/finally
        MutaionObserver
        process.nextTick(Node.js 环境)

运行机制
    所有的同步任务都是在主进程执行的形成一个执行栈,
    主线程之外,还存在一个"任务队列",
    任务队列中先执行宏任务,然后清空当次宏任务中的所有微任务,然后进行下一个tick如此形成循环

2.实例

async function Prom() {
    console.log("y")
    await Promise.resolve()
    console.log("x")
}
setTimeout(() => {
    console.log(1)
    Promise.resolve().then(() => {
        console.log(2)
    })
}, 0)
setTimeout(() => {
    console.log(3)
    Promise.resolve().then(() => {
        console.log(4)
    })
}, 0)
Promise.resolve().then(() => {
    console.log(5)
})
Promise.resolve().then(() => {
    console.log(6)
})
Promise.resolve().then(() => {
    console.log(7)
})
Promise.resolve().then(() => {
    console.log(8)
})
Prom()
console.log(0)


// y 0 
// 5 6 7 8 x
// 1 2 3 4

3.nextTick原理

源码里flushJobs函数维护三个队列
    一个flush配置为pre的watch
    一个queue保证父组件在子组件之前
    一个flush配置为post的watch
nextTick始终返回一个Promise,把同步任务改为微任务

31.unocss原子化/tailwind

---作了解---

基础用法

// 安装
npm i -D unocss


// 配置vite.config.js
import unocss from 'unocss/vite'
plugins: [
    vue(),
    unocss({
      rules: [
        ["flex", { display: "flex" }],
        ["red", { color: "red" }],
      ],
    }),
],


// 配置main.ts
import 'uno.css'


// 使用
<div class="flex red">
    ---A---
</div>

32.函数式编程h函数的基本了解

33.electron的基本了解

34.环境变量

// 开发环境
创建.env.development

// 生产环境
创建.env.production

// 使用
在app中:
const env = import.meta.env
console.log('env', env);

35.webpack打包相关

36.vue3性能优化

// 按需引入elementPlus/antd


// PWA离线存储技术


// 相关配置优化
build:{
       chunkSizeWarningLimit:2000,
       cssCodeSplit:true, //css 拆分
       sourcemap:false, //不生成sourcemap
       minify:false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
       assetsInlineLimit:5000 //小于该值 图片将打包成Base64 
}


// 图片懒加载vue3-lazy


// 虚拟列表


// 其他:多线程useWebWorker,防抖节流:useDebounceFn

37.Web Components了解

38.跨域

常见的三种解决方法

// 1.jsonp,动态产生script
function clickButton() {
    let obj, s
    obj = { "table":"products", "limit":10 }; //添加参数
    s =  document.createElement("script"); //动态创建script
    s.src = "接口地址xxxxxxxxxxxx"  + JSON.stringify(obj);
    document.body.appendChild(s);
 }
//与后端定义callback名称
function myFunc(myObj)  {
    //接受后端返回的参数
    document.getElementById("demo").innerHTML = myObj;
}



// 2.cors
{
  "Access-Control-Allow-Origin": "http://web.xxx.com" //可以指定地址
}


// 3.配置跨域
vite.config.ts中:
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:9001/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""), //重写路径,替换/api
      },
    },
  },