First acquainted with vue3.0+ts project construction and development

1. Install create-vite-app globally

cnpm install create-vite-app --save

2. Create a project directory

cva vue3-demo
或者
create-vite-app vue3-ui

The difference between Vue 2 and Vue 3

90% of the wording is exactly the same, except for the following points

• Vue 3’s Template supports multiple root tags, but Vue 2 does not
• Vue 3 has createApp(), while Vue 2 has new Vue()
• createApp(component), new Vue({template, render})

3. Introduce Vue Router 4

3.1. Use the command line to view all version numbers of vue-router

npm info vue-router versions

Install the latest vue-router@4.0.10

yarn add vue-router@4.0.10

3.2. Initialize vue-router
1). Create a new history object

import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()

2). Create a new router object

const router = createRouter()

3). Introduce TypeScript
Change the main.js file to main.ts, we will find that there are many errors
Error 1: One parameter needs to be passed in createRouter, but we passed in 0
solve:

const router = createRouter({
  history,
  routes: [
    { path: '/', component: Lifa }
  ]
})

Error 2: .vue type file prompt cannot find module xxx.vue
The reason ts can only understand files with a .ts suffix, but cannot understand .vue files
Solution:

• Google search Vue 3 can not find module
• Create xxx.d.ts and tell TS how to understand .vue files
• src/shims-vue.d.ts

declare module '*.vue' {
  import { Component } from 'vue'
  const component: Component
  export default component
}

It should be noted here that if we use vscode, the error report is gone, but if we use the webstrom editor it will still report the same error. We need to install additional ts and then initialize the ts configuration

yarn add typescript -D
tsc --init

This way the error will be resolved
4). Use router

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

5). Add <router-view>

• App.vue

<template>
  <div>hi</div>
  <router-view/>
</template>

<script>

export default {
  name: 'App'
}
</script>

6). Add <router-link>

<div>导航栏 |
    <router-link to="/">lifa</router-link>
    <router-link to="xxx">lifa2</router-link>
</div>

4. Install sass

cnpm install sass sass-loader --save-dev 

Note: sass must be installed in devDependencies, otherwise the console will report an error

4.3. Re-run yarn install

5. Use provide and inject to achieve parent-child component communication

5.1. Use provide to provide a variable value in the parent component, provide the first parameter is the variable name, the second is the corresponding value

• App.vue

<script lang="ts">
import { ref, provide } from 'vue'
export default {
  name: 'App',
  setup() {
    const menuVisible = ref(false)
    provide('xxx', menuVisible)
  }
}

5.2. Use this variable through inject in the subcomponent, the key value of the provide you set in the brackets

• 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. Switch between routes

• 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('路由切换了')
})

Click the menu to jump to close the left menu bar
We need to set the value of menuVisible to false when the route leaves, but we can't get the variable menuVisible in main.ts, so if we put router.afterEach in the App, we can access this variable, but in this case Our router is no longer accessible in the App, so we need to build a separate router.ts file

• 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)