Vue练习-后台管理的登录页面

登录页面制作

相关知识点:vue-router + element-UI + axios

先记录一下,在CLI3自动配置webpack后,针对被隐藏了的配置,如何更改别名的操作。

在下图目录中,新建vue.config.js文件,然后暴露以下代码:

首先,在view下新建login.vue文件,然后在router的index.js中配置路由,mode使用的H5的history,没有使用hash,因为history的路径更好看,但是据说...兼容性没有hash强。组件页面的加载,采用懒加载的方式,避免一次性获取过多数据,导致白屏之类的,用户体验差。

过程中,重定向的单词写成direct,导致了错误,要记住。

利用flex布局,先把login.vue组件的样式写好,其中,因为使用了element-ui,所以在main.js中引入了Element-UI和其样式文件。由于觉得按需引入太麻烦,偷懒全部引入了,缺点是加载内容过多。

今天新学习的是element-ui中的Form和Button,样式结构都很简单。需要记住的是下面几个点:

①将input中的数据和data中的数据绑定:首先在<el-form>中动态绑定属性:model=“loginData”,再在<el-input>中绑定v-model指令。

②表单验证:首先在<el-form>中动态绑定属性:rules=“loginRul”,再在<el-form-item>中,添加属性prop

③给<el-form>添加ref属性,使表单组件,可以在methods中的事件函数中被调用。

this.$refs.XXX.方法()

最后,在简单验证和交互都实现后,可以给登录按钮绑定注册请求,还是对网络请求进行了一层封装,因为在项目中重复使用axios直接去请求,有点粗鲁。

新建了network文件夹,在目录下,新建request.js文件。

最后的最后,简单的登录页面就制作完成了,不过,其实这个页面还可以做简单的优化,比如:

不管成功失败,都可弹出toast提示用户,在登录界面做一点过渡效果什么的。

效果图:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,925评论 0 1
  • vue在最近一段时间火热起来,相比较于ng特别是ng1和rectjs, vue显得更加轻,它也迎合了前端模块化,组...
    拿着号码牌徘徊阅读 10,501评论 4 49
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    柴东啊阅读 15,927评论 2 140
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 11,542评论 1 77
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    你猜_3214阅读 13,843评论 0 118

友情链接更多精彩内容