初始架構(gòu)
vite 文檔給出的命令是
npm init vite-app <project-name>
yarn create vite-app <project-name>
等價于
全局安裝 create-vite-app 然后
cva <project-name>
等價于
npx createa-vite-app <project-name>
即 npx 會幫你全局安裝用到的包
Vue 2 和 Vue 3 的區(qū)別
90% 的寫法完全一致，除了以下幾點
Vue 3 的 Template 支持多個根標(biāo)簽，Vue 2 不支持
Vue 3 有 createApp()辅柴，而 Vue 2 的是 new Vue()
createApp(組件)煤伟，new Vue({template, render})
三個create分別對應(yīng)內(nèi)存型路由，Hash型路由和History型路由
Router類型參數(shù)：history和routes
菜單的隱藏和顯示
搞一個asidevisible的變量,ture是顯示 false是隱藏嗜憔。放在app里面魏蔗，放到其他地方無法訪問，把asidevisible標(biāo)記為所有后代都可以使用痹筛，讓他的子組件都可以訪問莺治，用provide（‘xxx’,asideVisible）獲取asideVisible，無論app和topnav之間有多少層組件帚稠，provide都可以訪問到谣旁。在topnav和aside里面加一個inject( ).可以訪問到asidevisible的值
解決switch組件的css動畫，怎么才能讓圓圈滑到右端
如果用動畫滋早，動畫只可以改變過渡的值榄审，不可以改變屬性。所以
用calc()
value不僅可以表示初始狀態(tài)杆麸，也可以表示更新后的狀態(tài)
使用 :value 和 @input 讓父子組件進(jìn)行通信組件通信)和$event
內(nèi)部通信：自產(chǎn)自銷搁进，只可以在內(nèi)部
父子通信：值從別的組件得來的，需要改通過context.emit（'update：xxx'）告訴那個組件需要修改昔头，改完了組件再把修改過后的值傳回來
xxx必須和props { xxx:yyyyyyyyy}里聲明的一致
emit（事件名饼问，事件參數(shù)），///$event的值就是事件參數(shù)
使用 v-model
Vue 3 的v-model
要求：
屬性名任意揭斧，假設(shè)為 x
事件名必須為 "update:x"
效果：
<Switch :value="y" @update:value="y = $event"/>
可以簡寫為：
<Switch v-model:value="y" />
文檔
breaking change：https://v3.vuejs.org/guide/migration/v-model.html#using-v-bind-sync
value="true" 和 :value="true" 的區(qū)別
沒有冒號是字符串 后面有冒號的是boolean
使用 CSS transition 添加過渡動畫
使用 ref 可創(chuàng)建內(nèi)部數(shù)據(jù)
框架就是把你框起來：不準(zhǔn)改 props
Vue 2 和 Vue 3 的區(qū)別
新 v-model 代替以前的 v-model 和 .sync
新增 context.emit莱革，與 this.emit 可以在method里用
context.emit在setup( )里用讹开、
Vue屬性繼承盅视，默認(rèn)屬性傳給根元素
inheritAttrs意思是繼承屬性，不想用的話可以用inheritAttrs：false 來禁用它旦万，
… 擴展聲明符 展示所有的屬性闹击，consolo.log的時候很好用
props和attrs，
1>props如果不聲明成艘，就什么都沒有,要先聲明才可以取值赏半，attrs不用先聲明贺归，默認(rèn)會收集值
2> props不包含事件，attrs包含事件
3>在props里沒聲明的東西除破，回自動跑到attrs里.
4>props可以聲明string之外的類型牧氮，attrs只能支持atring類型。
UI庫的CSS
不能使用 scoped,因為 data-v-xxx 中的 xxx 每次運行可能不同
必須輸出穩(wěn)定不變的 class 選擇器瑰枫，方便使用者覆蓋
必須加前綴
.button 不行踱葛，如果使用者起名叫button，很容易被使用者覆蓋光坝。.gulu-button 可以尸诽，不太容易被覆蓋
.theme-link 不行，很容易被使用者覆蓋
.gulu-theme-link 可以盯另，不太容易被覆蓋
^=xxx 以xxx開頭的 *= xxx 含有xxx字符段的
<template>里面還可以再寫一個<template>性含！
Dialog 的值由visiable控制，但是visiable是外部傳入的props鸳惯，props不能更改商蕴！
emit沒有返回值，沒有返回值芝发，沒有返回值绪商！事件不應(yīng)該有返回值！
具名插槽用法：
在外面寫上 <template v-slot:xxx>
在里面寫上 <slot name="xxx">
CSS層級比較辅鲸。需要看上級層級格郁。
<Teleport to="xxx"> 請把我傳送到xxx的下面，可以用于CSS層級
用JS獲取插槽內(nèi)容
const defaults = context.slots.default()
動態(tài)設(shè)置div的寬度
v-for里的高級用法独悴，動態(tài)綁定ref
如果當(dāng)前元素存在例书，就用divs里面的第i個等于el
實際操作
<div
class="neko-tabs-nav-item"
v-for="(t, index) in titles"
:ref="el => { if (el) navItems[index] = el }"
@click="select(t)"
:class="{ selected: t === selected }"
:key="index"
>
export default {
setup(props, context) {
const navItems = ref < HTMLDivElement[] > ([])
}
ref后面的<>用來傳TS的參數(shù)，這是TS的泛型語法刻炒，告訴TS决采，后面（）里的數(shù)組類型是HTMLDiv，要在動態(tài)掛載后才可以查詢到navItem的值落蝙，所以用onMounted织狐，然后用filter去過濾，找到div里面的classList
看filter篩選結(jié)果里有沒有用contains('屬性名'),然后用getBoundingClientRect獲取元素的寬度值筏勒，也就是導(dǎo)航一的寬度，
然后賦值給橫線的寬度
const result = divs.filter(div => div.classList.contains('selected'))[0]
/////還可以這么寫
///const result = divs.find(div => div.classList.contains('selected'))[0]
////缺點就是一些古老的瀏覽器不支持find
const {width}=result.getBoundingClientRect()
indicator.value.style.width=width+'px'
Vue3 WatchEffect 可以在值第一次變化是時候執(zhí)行旺嬉，值在后面變化的時候也執(zhí)行管行，放在onMounted（）里才不會有BUG
ES 6 析構(gòu)賦值的重命名語法
const { left: left1 } = x. getBoundingClientRect()
const { left: left2 } = y. getBoundingClientRect()
文檔主頁畫圓弧
用border-radius: 100px 40px
用 clip-path:ellipse(80% 60% at 50% 40%)
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
采用grid布局
如果router-ink被選中，vue自帶屬性 router-link-active 和router-link-exact-active
就可以加CSS啦
如何像官網(wǎng)一樣展示源代碼
需要用vue-loader的CustomBlocks
文檔鏈接:https://vue-loader.vuejs.org/guide/custom-blocks.html
Component.__sourceCode = ${
JSON.stringify(main)
}
Component.__sourceCodeTitle = ${JSON.stringify(title)}
}`.trim()
用法：在組件里寫一個<demo> 檢查的時候發(fā)現(xiàn)有<demo>標(biāo)簽邪媳，就把當(dāng)前源代碼除了<demo>標(biāo)簽之外的東西捐顷，放到當(dāng)前組件__sourceCode里面
高亮源代碼：用prismjs和v-html
一個花里胡哨的官網(wǎng)：https://prismjs.com/
引入的話不需要官網(wǎng)說的 import Prism from 'prismjs';
會報錯荡陷。在prism.js文件里把這個prism聲明成全局變量了
項目build 之后不加載 md 文件
這是因為 rollup 不支持 import() 時動態(tài)讀取路徑（也就是拼字符串）
要么讓它支持一下（不靠譜）
要么不要拼字符串 ? 在route.ts里把所有動態(tài)路由改成靜態(tài)路由，就是讓他事先加載好迅涮，然后在后面的md函數(shù)里直接引用
