1.简化路径

//vite.consfig.ts
import { defineConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue' 
import path from 'path'
export default defineConfig(({ command }: ConfigEnv) => {return {plugins: [vue(),],resolve: {alias: {'@': path.resolve(__dirname, './src')}},}
})

       

//tsconfig.json 
"compilerOptions": {"baseUrl": "./", "paths": {  "@/*": ["src/*"]},"esModuleInterop": true	 //可配可不配，它用于简化 TypeScript 项目中不同模块系统之间的导入和    导出操作，使代码更加清晰和兼容。},

使用

export const allRoutes = [{path:'/login',name:'登录',component:()=> import('@/views/login/index.vue'),},
]//若没进行 @ 的配置export const allRoutes = [{path:'/login',name:'登录',component:()=> import('../views/login/index.vue'),},
]

虽然上述代码不是很能看出配置 @ 的好处，当是当你做一个比较大项目，一个文件夹套了很多文件夹时你就得   ../../xx 非常麻烦，建议做项目的时候配上

 2.layout布局和el-form做登录静态页面

        通过row和col组合，进行布局

        未完待续...