关于前端vue框架学习一(基于 vue 3.2.47)

一. 简述

本文将对 vue 框架中的主要文件进行简单描述。

二. vue框架下主要文件简述

文件加载流程：index.gtml -> main.ts -> App.vue -> router.ts -> main.css
其中在 main.ts 进行挂载主要的 ts 和 vue 文件，后续将在这个两个文件中进行挂载和链接其他的 vue 和 ts 文件。

1. 主要文件

(1) index.html

index.html 这个文件作为整个框架的入口文件，你在安装后，你在这个文件中能看到，其中引用了 main.ts 以此作为主要核心，进而加载其他的文件。

(2) main.ts

main.ts 这个文件是主要挂载整个 App 的中心，其中引入了 vue-core 的 createApp 方法，以此开始整个项目的加载，然后开始引入如下的文件，加载路由和首页
import App from './App.vue'
import router from './router'

(3) ./router/index.ts

因为在 main.ts 已经对此文件进行了预定义，以此文件作为路由文件，所以整个项目路由可在此定义。
其中需要注意的是：
import login from "../views/login.vue" 为直接加载的模式
如下为懒加载，可以优化性能

routes: [
    {
      path: '/about',
      name: 'about',
      // 懒加载
      component: () => import('../views/login.vue')
    }
  ]

(4) App.vue

此 vue 可以作为正常 vue 来编写，只不过在 main.ts 中定义了，加载将会是最快的那一个。