初始架构
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 的区别
90% 的写法完全一致，除了以下几点
Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
三个create分别对应内存型路由，Hash型路由和History型路由
Router类型参数：history和routes
菜单的隐藏和显示
搞一个asidevisible的变量,ture是显示 false是隐藏。放在app里面，放到其他地方无法访问，把asidevisible标记为所有后代都可以使用，让他的子组件都可以访问，用provide（‘xxx’,asideVisible）获取asideVisible，无论app和topnav之间有多少层组件，provide都可以访问到。在topnav和aside里面加一个inject( ).可以访问到asidevisible的值
解决switch组件的css动画，怎么才能让圆圈滑到右端
如果用动画，动画只可以改变过渡的值，不可以改变属性。所以
用calc()
value不仅可以表示初始状态，也可以表示更新后的状态
使用 :value 和 @input 让父子组件进行通信组件通信)和$event
内部通信：自产自销，只可以在内部
父子通信：值从别的组件得来的，需要改通过context.emit（'update：xxx'）告诉那个组件需要修改，改完了组件再把修改过后的值传回来
xxx必须和props { xxx:yyyyyyyyy}里声明的一致
emit（事件名，事件参数），///$event的值就是事件参数
使用 v-model
Vue 3 的v-model
要求：
属性名任意，假设为 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" 的区别
没有冒号是字符串 后面有冒号的是boolean
使用 CSS transition 添加过渡动画
使用 ref 可创建内部数据
框架就是把你框起来：不准改 props
Vue 2 和 Vue 3 的区别
新 v-model 代替以前的 v-model 和 .sync
新增 context.emit，与 this.emit 可以在method里用
context.emit在setup( )里用、
Vue属性继承，默认属性传给根元素
inheritAttrs意思是继承属性，不想用的话可以用inheritAttrs：false 来禁用它，
… 扩展声明符 展示所有的属性，consolo.log的时候很好用
props和attrs，
1>props如果不声明，就什么都没有,要先声明才可以取值，attrs不用先声明，默认会收集值
2> props不包含事件，attrs包含事件
3>在props里没声明的东西，回自动跑到attrs里.
4>props可以声明string之外的类型，attrs只能支持atring类型。
UI库的CSS
不能使用 scoped,因为 data-v-xxx 中的 xxx 每次运行可能不同
必须输出稳定不变的 class 选择器，方便使用者覆盖
必须加前缀
.button 不行，如果使用者起名叫button，很容易被使用者覆盖。.gulu-button 可以，不太容易被覆盖
.theme-link 不行，很容易被使用者覆盖
.gulu-theme-link 可以，不太容易被覆盖
^=xxx 以xxx开头的 *= xxx 含有xxx字符段的
<template>里面还可以再写一个<template>！
Dialog 的值由visiable控制，但是visiable是外部传入的props，props不能更改！
emit没有返回值，没有返回值，没有返回值！事件不应该有返回值！
具名插槽用法：
在外面写上 <template v-slot:xxx>
在里面写上 <slot name="xxx">
CSS层级比较。需要看上级层级。
<Teleport to="xxx"> 请把我传送到xxx的下面，可以用于CSS层级
用JS获取插槽内容
const defaults = context.slots.default()
动态设置div的宽度
v-for里的高级用法，动态绑定ref
如果当前元素存在，就用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的参数，这是TS的泛型语法，告诉TS，后面（）里的数组类型是HTMLDiv，要在动态挂载后才可以查询到navItem的值，所以用onMounted，然后用filter去过滤，找到div里面的classList
看filter筛选结果里有没有用contains('属性名'),然后用getBoundingClientRect获取元素的宽度值，也就是导航一的宽度，
然后赋值给横线的宽度
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 可以在值第一次变化是时候执行，值在后面变化的时候也执行，放在onMounted（）里才不会有BUG
ES 6 析构赋值的重命名语法
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啦
如何像官网一样展示源代码
需要用vue-loader的CustomBlocks
文档链接:https://vue-loader.vuejs.org/guide/custom-blocks.html
Component.__sourceCode = ${
JSON.stringify(main)
}
Component.__sourceCodeTitle = ${JSON.stringify(title)}
}`.trim()
用法：在组件里写一个<demo> 检查的时候发现有<demo>标签，就把当前源代码除了<demo>标签之外的东西，放到当前组件__sourceCode里面
高亮源代码：用prismjs和v-html
一个花里胡哨的官网：https://prismjs.com/
引入的话不需要官网说的 import Prism from 'prismjs';
会报错。在prism.js文件里把这个prism声明成全局变量了
项目build 之后不加载 md 文件
这是因为 rollup 不支持 import() 时动态读取路径（也就是拼字符串）
要么让它支持一下（不靠谱）
要么不要拼字符串 ✔ 在route.ts里把所有动态路由改成静态路由，就是让他事先加载好，然后在后面的md函数里直接引用
