router/index.js
NProgress
NProgress 是一个 轻量级的页面加载进度条库，通常用于网页加载、路由跳转时，在页面顶部显示一条加载进度条，提供用户视觉反馈，告诉他们“页面正在加载”。
router/routes.js
...constantRoutes
export default [
...constantRoutes
]
...constantRoutes 这三个点是 ES6 的展开运算符（Spread Operator） ，它的作用是：
把一个数组的每一项“展开”插入到另一个数组中。
也就等同于：
const routes = constantRoutes
export default routes
但更准确地说，是把 constantRoutes 数组里的所有“路由项”，一个个放进新的数组里。
举例来说：
const constantRoutes = [
{ path: '/', component: Home },
{ path: '/login', component: Login }
]
那这段代码：
export default [
...constantRoutes
]
等价于：
export default [
{ path: '/', component: Home },
{ path: '/login', component: Login }
]
export const Layout = () => import("@/layout/index.vue");
定义一个名为 Layout 的异步组件，并导出它，它会在运行时动态加载 @/layout/index.vue 这个组件文件。
() => import(...) 是**异步导入（懒加载）**语法
这不是立刻执行 import，而是等到这个组件 真正被用到（比如切换到某个路由）时再加载，从而：
- 减少初始加载体积
- 提高性能
- 更适合大型项目模块化加载
@/layout/index.vue 是文件路径
-
@是路径别名，通常指向src目录（在vite.config.js或webpack.config.js中配置的） -
所以它实际等价于：
src/layout/index.vue
export const Layout = ...
是把这个组件导出（命名导出），供别的文件使用，比如路由配置文件。
export const Layout = () => import("@/layout/index.vue") 是将一个 Vue 组件设置为按需加载的异步组件，并导出供路由或其他地方使用，常用于大型项目的路由懒加载。
懒加载的目标是：只加载“首屏必须展示”的内容，其余的内容“等用到时再加载”。
假设你的页面结构如下：
Layout：顶部导航、侧边栏（占 100KB）Dashboard.vue：首页图表内容（占 200KB）User.vue：用户页面（占 300KB）Settings.vue：设置页面（占 250KB）
如果你把所有组件都“立即加载”（直接 import）：
用户打开首页
/dashboard，你会立刻加载这 全部 850KB 内容。
但如果你使用懒加载：
- 首页只加载：
Layout（如果懒加载的话）+Dashboard组件 User和Settings等用户跳转后才加载
用户首屏只需要加载 最多 300KB 的内容，页面就能显示。
