Vben Admin 二(登录页)
深入 Vben Admin登录部分1、运行使用指令yarn serve执行Local:http://localhost:3100/此时的路径为http://localhost:3100/#/login?redirect=/dashboard/analysis2、参与文件作用main.ts序入口文件index.ts设置默认主页(当前为登录页)LoginForm.vue登录页表单3、详解一、main.
·
深入 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
更多推荐
已为社区贡献1条内容
所有评论(0)