初识vue3.0+ts项目搭建开发

1.全局安装create-vite-appcnpminstallcreate-vite-app--save2。创建项目目录cvavue3-demoorcreate-vite-appvue3-uiVue2和Vue3的区别90%的写法完全一样，除了以下几点Vue3的Template支持多根标签，Vue2不支持Vue3有createApp()，而Vue2的是newVue()createApp(component),newVue({template,render})3.引入VueRouter43.1。使用命令行查看vue-router的所有版本号npminfovue-routerversions安装最新的vue-router@4.0.10yarnaddvue-router@4.0.103.2。初始化vue-router1)。创建一个新的历史对象import{createWebHashHistory,createRouter}from'vue-router'consthistory=createWebHashHistory()2)。创建一个新的路由器对象constrouter=createRouter()3)。引入TypeScript，把main.js文件改成main.ts，我们会发现有很多错误Error1:CreateRouter需要传入一个参数，而我们传入了0。解决方法：constrouter=createRouter({history,routes:[{路径：'/'，组件：Lifa}]}）错误2：。vue类型文件提示找不到模块xxx.vue原因ts只能理解.ts后缀的文件，不能理解.vue文件解决方法：谷歌搜索Vue3找不到模块创建xxx.d.ts，告诉TS如何理解.vue文件src/shims-vue.d.tsdeclaremodule'*.vue'{import{Component}from'vue'constcomponent:COmponentexportdefaultcomponent}这里需要注意的是，如果我们使用vscode，报错没有了，但是如果我们使用webstrom编辑器，还是会报同样的错误，需要额外安装ts，然后初始化ts配置yarnaddtypescript-Dtsc--init这个错误会被解决4).使用routerconstapp=createApp(App)app.use(router)app.mount('#app')5)。添加App.vue6).添加

4.安装sasscnpminstallsasssass-loader--save-dev注意：sass要安装在devDependencies中，否则控制台会报错4.3。重新运行yarninstall5。使用provide和inject实现父子组件通信5.1．在父组件中使用provide提供一个变量值，provide是第一个参数是变量名，第二个是对应的值App.vueimport{ref,provide}from'vue'exportdefault{name:'App',setup(){constmenuVisible=ref(false)provide('xxx',menuVisible)}}5.2。通过inject在子组件中使用这个变量，括号是你的设置providetopnav.vueimport{inject,Ref}from'vue'的键值exportdefault{name:'TopNav',setup(){constmenuVisible=inject>('xxx')console.log(menuVisible.value,'topNavmenuvisible')}}6.路由切换Doc.vue

切换组件

mian.tsconstrouter=createRouter({history,routes:[{path:'/',component:Home},{path:'/doc',component:Doc,children:[{path:'switch',component:SwitchDemo}]}]})router.afterEach(()=>{console.log('routingswitched')})实现点击菜单跳转关闭左侧菜单我们需要在路由时设置menuVisible的值为false离开了，但是我们在main.ts中获取不到这个变量menuVisible，所以如果我们把router.afterEach放在App中，我们就可以访问到这个变量，但是这个App又不能访问到我们的router了，所以我们需要建立一个router.ts文件router.tsimport{createWebHashHistory,createRouter}from'vue-router'importHomefrom'./views/Home.vue'importDocfrom'./views/Doc.vue'从'./views/SwitchDemo.vue'导入SwitchDemo:'/doc',component:Doc,children:[{path:'switch',component:SwitchDemo}]}]})App.vueimport{router}from"./router";setup(){constwidth=document.documentElement.clientWidthconstmenuVisible=ref(width>500?true:false)provide('xxx',menuVisible)router.afterEach(()=>{menuVisible.value=false})}main.tsimport{router}from'./router'constapp=createApp(App)app.use(router)