1. 全局安装create-vite-app
yarn global add create-vite-app@1.18.0
2.创建项目目录
cva vue3-ui
或者
create-vite-app vue3-ui
Vue 2 和 Vue 3 的区别
90% 的写法完全一致，除了以下几点
- Vue 3 的 Template 支持多个根标签，Vue 2 不支持
- Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
- createApp(组件)，new Vue({template, render})
3.引入Vue Router4
3.1. 使用命令行查看vue-router 所有版本号
npm info vue-router versions
安装最新的vue-router@4.0.0-beta.6
yarn add vue-router@4.0.0-beta.6
3.2. 初始化vue-router
1). 新建 history 对象
import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()
2). 新建 router 对象
const router = createRouter()
3). 引入 TypeScript
把main.js文件改为main.ts，我们会发现有很多报错
报错1：createRouter里面需要传入一个参数，但我们却传入了0个
解决：
const router = createRouter({
history,
routes: [
{ path: '/', component: Lifa }
]
})
报错2：.vue类型的文件提示cannot find module xxx.vue
原因ts只能理解.ts为后缀的文件，无法理解.vue文件
解决方法：
- Google 搜索 Vue 3 can not find module
- 创建 xxx.d.ts，告诉 TS 如何理解 .vue 文件
- src/shims-vue.d.ts
declare module '*.vue' {
import { Component } from 'vue'
const component: Component
export default component
}
这里要注意如果我们用的是vscode这时报错已经没了，但是如果我们用的是webstrom编辑器它还是会报同样的错误，我们需要再额外的安装ts，然后初始化ts配置
yarn add typescript -D
tsc --init
这样报错就会解决了
4). 使用router
const app = createApp(App)
app.use(router)
app.mount('#app')
5). 添加 <router-view>
- App.vue
<template>
<div>hi</div>
<router-view/>
</template>
<script>
export default {
name: 'App'
}
</script>
6). 添加 <router-link>
<div>导航栏 |
<router-link to="/">lifa</router-link>
<router-link to="xxx">lifa2</router-link>
</div>
4. 安装sass
yarn add sass
发现控制台报错
解决方法：
4.1 打开package.json
4.2. 把dependencies里的sass这一行，移到devDependencies
4.3. 重新运行yarn install
5. 使用provide和inject实现父子组件通信
5.1. 在父组件里使用provide提供一个变量值，provide第一个参数是变量名，第二个是对应的值
- App.vue
<script lang="ts">
import { ref, provide } from 'vue'
export default {
name: 'App',
setup() {
const menuVisible = ref(false)
provide('xxx', menuVisible)
}
}
5.2. 在子组件里通过inject使用这个变量，括号里的就是你设置的provide的key值
- topnav.vue
import { inject, Ref } from 'vue'
export default {
name: 'TopNav',
setup() {
const menuVisible = inject<Ref<boolean>>('xxx')
console.log(menuVisible.value, 'topNav menuvisible')
}
}
6. 路由间切换
- Doc.vue
<li>
<router-link to="/doc/switch">Switch 组件</router-link>
</li>
<main>
<router-view></router-view>
</main>
- mian.ts
const router = createRouter({
history,
routes: [
{ path: '/', component: Home },
{ path: '/doc', component: Doc, children: [
{ path: 'switch', component: SwitchDemo }
]
}
]
})
router.afterEach(() => {
console.log('路由切换了')
})
实现点击菜单跳转关闭左侧菜单栏
我们需要在路由离开的时候将menuVisible的值设为false，但是我们在main.ts里拿不到menuVisible这个变量，那如果我们把router.afterEach放在App里就可以访问这个变量了，但是这样的话App里又访问不到我们的router了，所以我们需要单独构建一个router.ts文件
- router.ts
import {createWebHashHistory, createRouter} from 'vue-router'
import Home from './views/Home.vue'
import Doc from './views/Doc.vue'
import SwitchDemo from './views/SwitchDemo.vue'
const history = createWebHashHistory()
export const router = createRouter({
history,
routes: [
{ path: '/', component: Home },
{ path: '/doc', component: Doc, children: [
{ path: 'switch', component: SwitchDemo }
]
}
]
})
- App.vue
import { router } from "./router";
setup() {
const width = document.documentElement.clientWidth
const menuVisible = ref(width > 500 ? true : false)
provide('xxx', menuVisible)
+ router.afterEach(() => {
+ menuVisible.value = false
+ })
}
- main.ts
import {router} from './router'
const app = createApp(App)
app.use(router)
