使用 Vite 搭建官网
全局安装 create-vite-app
yarn global add create-vite-app@1.18.0
创建项目目录
cva rain-ui
小知识
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 会帮你全局安装用到的包
创建项目后体会到的vue2和vue3的区别
90% 的写法完全一致，除了以下几点
Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
引入 Vue Router 4，初始化 vue-router
新建 history 对象 新建 router 对象 引入 TypeScript app.use(router) 添加 <router-view> 添加 <router-link>
开始创建官网
Home.vue
Topnav：左边是logo，右边是menu Banner：文字介绍 + 开始按钮
Doc.vue
Topnav：同上 Content：左边是 aside，右边是 main
新的路由
路径为 #/ 时
渲染 Home.vue
路径为 #/doc 时
渲染 Doc.vue
封装Home和Doc的导航栏部分，完善css和router
完成官网创建。
Switch组件
API 设计
<Switch value="true" /> //value 为字符串 "true" <Switch value="false" /> //value 为字符串 "false" <Switch :value=" true " /> //value 为布尔值 true <Switch :value=" false " /> //value 为布尔值 false
当 value 为字符串 "true" 或布尔值 true 时，显示为开
其他情况一律显示为关
如何让圆圈滚到右边
用 CSS transition
点击切换，并有动画
如何让 Switch 发出 input 事件
用 context.emit('input', xxx) 即可
Vue 3 的 v-model
要求
属性名任意，假设为 x
事件名必须为 "update:x"
效果
<Switch :value="y" @update:value="y = $event"/>
可以简写为
<Switch v-model:value="y" />
文档
这是 Vue 2 到 Vue 3 的一个大变动（breaking change)
文档里面有详细的介绍
小总结
value="true" 和 :value="true" 的区别
使用 CSS transition 添加过渡动画
使用 ref 创建内部数据
使用 :value 和 @input 让父子组件进行交流(组件通信)
使用 $event
使用 v-model
框架就是把你框起来：不准改 props
Vue 2 和 Vue 3 的区别
新 v-model 代替以前的 v-model 和 .sync
新增 context.emit，与 this.$emit 作用相同
效果
Button组件
需求
参考 Bulma、Element
可以有不同的等级（level）
可以是链接，可以是文字
可以 click、focus、鼠标悬浮
可以改变 size：大中小
可以禁用（disabled）
可以加载中（loading）
API 设计
<Button @click=? @focus=? @mouseover=? theme="button or link or text" level="main or normal or minor" size="big normal small" disabled loading \></Button>
Vue 3 属性绑定
默认所有属性都绑定到根元素
使用 inheritAttrs: false 可以取消默认绑定
使用 $attrs 或者 context.attrs 获取所有属性
使用 v-bind="$attrs" 批量绑定属性
使用 const {size, level, ...xxx} = context.attrs 将属性分开
UI 库的 CSS 注意事项
不能使用 scoped
因为 data-v-xxx 中的 xxx 每次运行可能不同
必须输出稳定不变的 class 选择器，方便使用者覆盖
必须加前缀
.button 不行，很容易被使用者覆盖
.rain-button 可以，不太容易被覆盖
.theme-link 不行，很容易被使用者覆盖
.rain-theme-link 可以，不太容易被覆盖
CSS 最小影响原则
CSS 绝对不能影响库使用者
让 button 支持 size 属性
size 的值为 big / normal / small
让 button 支持 level 属性
level 的值为 main / normal / minor / danger
让 button 支持 disabled
disabled 的值为 true / false
<button disabled> ☑
<button :disabled="true"> ☑
<button disabled="true"> ❎
<button disabled="false"> ❎
让 button 支持 loading
loading 值为 true / false
小总结
Vue 属性继承
默认属性传给根元素
inheritAttrs: false 禁用之
v-bind="$attrs" 或 context.attrs
库的 CSS 要求
不能用 scoped
每个 CSS 类要加前缀
CSS 最小影响原则
效果
Dialog组件
对话框
需求
点击后弹出
有遮罩层 overlay
有 close 按钮
有标题
有内容
有 yes / no 按钮
通过观看AntDesign确认大概代码
<Dialog visible title="标题" @yes="fn1" @no="fn2" ></Dialog>
让 Dialog 支持 visible 属性
让 Dialog 可以点击关闭
注意不能修改 props
让 Dialog 支持自定义内容
使用插槽 slot
把 Dialog 移到 body 下
防止 Dialog 被遮挡
内置组件：Teleport
效果：
