小白学习简单的vue+element-ui实现前端登录页面

.login_container{background-color:#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；//div居中位置:absolute;左：50%；顶部：50%；变换：翻译（-50%，-50%）；.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee;边界半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}}.btns{显示：flex；证明内容：flex-end；}.login_form{位置：绝对；底部：0；宽度：100%；填充：020px；box-sizing:border-box;}刚进入前端不久，还没有用过框架。最近公司的项目比较闲，正好有时间实践一下自己的项目。我选了一个电商项目，跟着视频，准备每天下班前把自己每天做的事情更新到博客上，方便后续自己复习和总结。1、登录功能业务流程2、登录业务相关技术点不存在跨域问题。推荐使用cookies和session；否则，使用token来支持跨域3.token原理分析Element-UI组件实现布局el-formel-form-itemel-inputel-button字体图标（iconfont）2.新建分支gitcheckout-b登录3.vue项目的基本结构。通过vscode打开项目，删除App.vue中不需要的代码块和router中index文件中删除不需要的代码块，在vscode中格式化代码（shift+alt+F）login.vue代码如下：.login_container{background-color:#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；//div居中位置:absolute;左：50%；顶部：50%；变换：翻译（-50%，-50%）；.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee;边界半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}}.btns{显示：flex；证明内容：flex-end；}.login_form{位置：绝对；底部：0；宽度：100%；填充：020px；box-sizing:border-box;}index.js代码如下importVuefrom'vue'importVueRouterfrom'vue-router'importLoginfrom'../components/Login'Vue.use(VueRouter)constroutes=[{path:'/login',component:Login},{path:'/',redirect:'/login'}]constrouter=newVueRouter({routes})exportdefaultroutermain.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'import'./plugins/element.js'import'./assets/global.css'import'./assets/fonts/iconfont.css'Vue.config.productionTip=falsenewVue({router,render:h=>h(App)}).$mount('#app')最后放上效果图。今天没时间写。该下班了。静态页面完成，后面会继续更新~但是有一个问题，就是这里的表单校验没有作用，报错，即使我加了String