创建项目
全局安装create-vite-app
yarn global add create-vite-app@1.18.0
创建项目
cva <projectName>
yarn 下载依赖
yarn dev 开启预览
Vue2与Vue3一些简单的区别
Vue2 template 只支持一个根标签。Vue3的支持多个根标签。
Vue使用 new Vue({options}) 创建实例， Vue3使用 createApp(组件) 。
引入Vue Router4
与 Vue2不同，Vue3Router需要单独下载。
yarn add vue-router@版本号
初始化Vue Router
import {createRouter,createWebHashHistory} from 'vue-router'
import {createApp} from 'vue'
const history = createWebHashHistory() //新建history对象
const router = createRouter({
history,
routes:[
{path:'/',component:Home}
]
})//使用createRouter创建router，createRouter接受两个参数。第一个参数为history对象。第二个参数为routes，有路径、组件组成的对象的数组。
const app = createApp(App)
app.use(router)
<router-link>、<router-view>标签分别用来添加链接以及展示对应内容。
provide、inject
通过顶部菜单Topnav的按钮来控制侧边栏aside的出现与隐藏，同级组件如何实现信息交流？
选择提到上一级组件，把开关值放在最上层组件 App，并通过 provide 来提供给子组件。为何不直接使用 props ？
因为provide 提供的值，无论是多深的子组件，只要在组件链中都能通过 inject拿到值。
provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。
inject()接受两个参数：第一个参数是注入的 key。在组件链中遍历 key 得到值，遵循就近原则，没有对应值则返回 undefined。第二个参数是可选选项，用来设置没有匹配到 key 时使用的默认值。
const menuVisible = ref(false)
provide('menuVisible',menuVisible)
ref()会返回一个响应式的、可更改的 ref 对象，并提供 .value 来访问其内部值。
嵌套路由
想要在组件中嵌套渲染另一个子组件。
只需要在路由中添加 children。
const router = createRouter({
history,
routes:[
{path:'/',component: Home},
{path:'/doc',component: Doc,children:[
{path:'intro',component: Intro},
{path:'install',component: Install},
{path:'get-started',component: GetStarted},
{path:'switch',component: SwitchDemo},
{path:'dialog',component: DialogDemo},
{path:'button',component: ButtonDemo},
{path:'tabs',component: TabsDemo},
]}
]
})
children也就是另一个路由数组。
顶层 router-view 渲染顶层路由匹配的组件。嵌套组件中的 router-view 渲染其所在组件路由下的嵌套路由。在上图中 Doc 组件里的 router-view就只能渲染 /doc下嵌套路由对应的组件。
router.afterEach
需要在手机浏览网页时每次点击侧边栏的路由链接后，自动关闭侧边栏。此时可使用router.afterEach()：添加一个导航钩子，在每次导航后执行。返回一个删除注册钩子的函数。
let screenWidth = ()=>document.documentElement.clientWidth //获取视窗宽度
window.onresize = ()=>{
menuVisible.value = screenWidth() > 500
}//每次视窗大小变化后执行
const menuVisible = ref(screenWidth() > 500)
router.afterEach(()=>{
if(screenWidth()<=500){
menuVisible.value = false
}
})
注：router.afterEach()是在每次导航后都会执行，与需求的每次点击侧边栏的路由链接后关闭侧边栏有出入。但是因为Doc组件比较简单，只包含侧边栏的路由以及返回首页的路由，因此也能满足需求。
