项目初始化

全局安装Vite

yarn global add create-vite-app
// 或者
npm i -g create-vite-app

初始化项目

cva <project-name>
// 或者
create-vite-app <project-name>

小知识 vite文档给出的命令是

npm init vite-app <project-name>
yarn create vite-app <project-name>

// 等价于
// 全局安装 create-vite-app然后
cva <project-name>

// 等价于
npx create-vite-app <project-name>
// 即 npx 会帮你全局安装用到的包

引入 Vue Router 4

// router.ts
import { createWebHashHistory, createRouter } from 'vue-router'

const history = createWebHashHistory()
export const router = createRouter({
  history: history,
  routes: [
  // ...
  ]
})

// mian.ts
import { createApp } from 'vue'
import App from './App.vue'
import './index.scss'
import { router } from './router'

createApp(App)
  .use(router)
  .mount('#app')

setup父子组件通信

文档参考

setup(props,context){
    context.emit(事件名，事件参数)
}

Vue3 的 v-model

要求

属性名任意(假设为x)，事件名必须为"update:x"

文档链接

示例

<Switch :value="y @update:value="y= $event" />
// 简写
<Switch v-model:value="y />