项目起步

1.全局安装yarn global add create-vite-app

yarn global add create-vite-app
// 项目启动
yarn dev

2.安装 vue-router

yarn add vue-router

3.初始化 vue-router

• 新建 history 对象
• 新建 router 对象
• 引入 TypeScript
• app.use(router)
• 添加 <router-view>
• 添加 <router-link>

4. provide 和 inject的使用

provide 和 inject是多层嵌套组件的引用共用的值，在最外层父组件使用provide

//示例1
//App.js
import { provide, ref } from "vue";
export default {
  name: "App",
  setup() {
    const menuVisible = ref(false);  //默认值为false
    provide("menuVisible", menuVisible); // set
  },
};

在其他组件可以用inject拿到provide的共享值

export default {
  setup() {
    const menuVisible = inject<Ref<boolean>>("menuVisible"); // get
    const toggleMenu = () => {
      menuVisible.value = !menuVisible.value;
    };
    return { toggleMenu };
  },
};