Vben Admin 二(登录页)

深入 Vben Admin

登录部分

1、运行

使用指令

yarn serve

执行 Local: http://localhost:3100/

此时的路径为http://localhost:3100/#/login?redirect=/dashboard/analysis

2、参与

文件	作用
main.ts	序入口文件
index.ts	设置默认主页（当前为登录页）
LoginForm.vue	登录页表单

3、详解

一、main.ts

问题	解答
什么是 main.ts	程序入口文件
有什么用	初始化vue实例并使用需要的 插件 , 加载各种 公共组件

• 结构

引入

	// 引入样式
   import '/@/design/index.less';
   import 'virtual:windi-base.css';
   import 'virtual:windi-components.css';
   import 'virtual:windi-utilities.css';
   
   // 引入注册图标
   import 'virtual:svg-icons-register';
   
   // 引入需要的部分
   import App from './App.vue';
   import { createApp } from 'vue';
   import { initAppConfigStore } from '/@/logics/initAppConfig';
   import { setupErrorHandle } from '/@/logics/error-handle';
   import { router, setupRouter } from '/@/router';
   import { setupRouterGuard } from '/@/router/guard';
   import { setupStore } from '/@/store';
   import { setupGlobDirectives } from '/@/directives';
   import { setupI18n } from '/@/locales/setupI18n';
   import { registerGlobComp } from '/@/components/registerGlobComp';

// 在本地开发中按需导入会增加20%左右的浏览器请求数。
// 这可能会减慢浏览器的刷新速度。
// 因此，只在生产环境中启用按需导入功能。

定义

if (import.meta.env.DEV) {
  import('ant-design-vue/dist/antd.less');
}

async function bootstrap() {
  const app = createApp(App);

  // 配置商店
  setupStore(app);

  // 初始化内部系统配置
  initAppConfigStore();

  // 注册全局组件
  registerGlobComp(app);

  // 多语言配置
  // 异步情况：语言文件可以从服务器端获得
  await setupI18n(app);

  // 配置路由
  setupRouter(app);

  // 路由守卫
  setupRouterGuard(router);

  // 注册全局指令
  setupGlobDirectives(app);

  // 配置全局错误处理
  setupErrorHandle(app);

  // https://next.router.vuejs.org/api/#isready
  // await router.isReady();

  app.mount('#app');
}

bootstrap();

二、 index.ts

三、 LoginForm.vue