深入 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

Vben Admin 二(登录页)相关推荐

8、mui 登录页/注册页/列表页/详情页
一参考资料二登录页效果图代码三注册页页面效果代码四列表页代码五详情页代码一.参考资料 http://edu.yuantuan.com/course/98/learn#lesson ...
shopxo 二次开发：设置（后台登录页）背景图
shopxo 二次开发:设置(后台登录页)背景图可通过后台设置是否背景图是否随机: 一.默认背景图片目录: 二.变更图片后,需要修改文件: 可通过后台设置是否背景图是否随机: 后台登录页随机背景图默 ...
为 Django admin 登录页添加验证码
为什么80%的码农都做不了架构师?>>> 历史原因,使用上古版本 django 1.6.5,但新版本应该大同小异首先添加自定义后台模块app, 如adm,并添加到 INSTA ...
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...
登录页跳转时保存用户信息-遇坑记
项目中遇到的问题,重新建前端界面,遇到了这个问题. 项目中使用Angular JS + admin LTE + bootstrap3 保存用户信息,我有两种思路,一个是使用Angular JS-ser ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...
前端炫酷登录页，拿来就能用
一. 炫酷星空代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
健身管理系统【登录页，首页，会员添加，修改，查询】
一,简介说明:这是我正式做的第一个简易项目使用场地:中小健身场所使用对象:前端对健身用户的管理,老板对管理员的管理所用到的技术: 前端:HTML+JS+CSS 后端:C#的MVC框架数据库: ...
Vben Admin
//项目结构 . ├── build # 打包脚本相关 │ ├── config # 配置文件 │ ├── generate # 生成器 │ ├── script # 脚本 │ └── vite # ...

Vben Admin 二(登录页)

深入 Vben Admin

登录部分

1、运行

2、参与

3、详解

Vben Admin 二(登录页)相关推荐

最新文章

热门文章