Vue3造轮子 剥洋葱解析代码含义

开始剥开 Vue 3 造轮子项目这颗大洋葱

1. 详解main.ts 最先执行的入口文件 渲染app

import "./lib/gulu.scss"
import './index.scss'
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router';

// createApp() 创建一个应用实例,第一个参数是根组件,第二个参数是要传递给根组件的 props,可选。 
// createSSRApp() 以 SSR 激活模式创建一个应用实例
const app = createApp(App);

// app.mount() 将应用实例挂载在一个容器元素中 参数为一个实际DOM元素 返回根组件的实例。在 SSR 激活模式下，它将激活容器内现有的 DOM 节点
app.mount("#app");  //每个应用实例，仅能调用一次

// app.component() 同时传递一个组件名字符串及其定义，则注册一个全局组件
app.component("Markdown",Markdown)

// app.use() 安装一个插件 
app.use(router);

2. 详解App.vue 唯一的根组件

<template>
  <router-view />  //将显示与 url 对应的组件 与router-link创建链接成对使用 映射关系在router.ts
</template>   

<script lang="ts">
// provide依赖 提供一个值，可以在应用中的所有后代组件中注入使用
import { ref, provide } from "vue";
import { router } from "./router";
export default {
  name: "App",
  setup() {
    const width = document.documentElement.clientWidth;
    const menuVisible = ref(width <= 500 ? false : true);
    provide("menuVisible", menuVisible); // set
    router.afterEach(() => {
      //手机页面点击路由后，aside自动关闭
      if (width <= 500) {
        menuVisible.value = false;
      }
    });
  },
};
</script>

3. 详解router.ts 映射关系

// 1. 引入API
import { createWebHashHistory, createRouter } from "vue-router";
// 静态的 import 是初始化加载依赖项的最优选择；只在声明了 type="module" 的 script 的标签中使用；
// createWebHashHistory(API) 创建一个 hash 历史记录 用于需要配置服务器(不能处理任意URL时)或无主机web应用程序(file://)
// createRouter(API) 创建一个可以被 Vue 应用程序使用的路由实例。

// 2. 引入路由组件列表
import Home from "./views/Home.vue";
import Doc from "./views/Doc.vue";
import SwitchDemo from "./components/SwitchDemo.vue";

// 3. createRouter API属性列表 RouterOptions: history | routes:RouteRecordRaw[]
const history = createWebHashHistory();  //基于 hash 的历史记录；不需配置服务器
// const history = createWebHistory();    //另一个history参数，需要配置服务器

// 解构导出并重命名
// routes:RouteRecordRaw[] 应该添加到路由的初始路由列表
// children 当前记录的嵌套路由
export const router = createRouter({       
  history: history,  
  routes: [
    { path: "/", component: Home },
    { path: "/doc", component: Doc, children: [
        { path: "", component: DocDemo },
        { path: "switch", component: SwitchDemo }
      ],
    },
  ],
});

4. 详解造轮子的实现逻辑

• 需求分析：首先搞清楚做的是什么玩意(借鉴已有组件)
• API设计：组件怎么用
• 写代码
• 测试及发现bug
• 解决bug再写
• 再测试及发现bug
• 循环：解决bug、测试、直到基本完成