前端直接访问登录页面报错_登录页面集成vuex，完善前端登录页面样式

登录页面简单的实现了&＃xff0c;不过没有对页面进行美化一下&＃xff0c;今天对页面进行一下美化。

elementui已经集成进来了。所以就直接进行使用

使用 Form 组件

里面都太复杂了&＃xff0c;随便参考一个

后台登录

上面的代码&＃xff0c; 里面放置 &＃xff0c; 里面再放置其它的内容&＃xff0c;比如 &＃xff0c;关于 和 的属性&＃xff0c;查看官方文档&＃xff0c;

在简单的添加一下样式

这样登录页面的效果就展示出来了

Vuex的使用&＃xff0c;先看下目录结构

新建store文件下&＃xff0c;module分模块存放 store.js进行集合存放&＃xff0c;然后提供使用

user.js

var state&＃61; { userDetail:{ userId:&＃39;test&＃39; }}var mutations&＃61;{ setUser(state,user){ state.userDetail &＃61; user; }}export default { state, mutations}

store.js

import Vue from &＃39;vue&＃39;import Vuex from &＃39;vuex&＃39;Vue.use(Vuex)import user from &＃39;./module/user&＃39;const store &＃61; new Vuex.Store({ modules: { user }})export default store

main.js进行引用

import Vue from &＃39;vue&＃39;import App from &＃39;./App.vue&＃39;import &＃39;./plugins/element.js&＃39;import store from &＃39;./store/store&＃39;import router from &＃39;./router/index&＃39; //引入路由配置var axios &＃61; require(&＃39;axios&＃39;)axios.defaults.baseURL &＃61; &＃39;http://localhost:8080/api&＃39;// 全局注册&＃xff0c;之后可在其他组件中通过 this.$axios 发送数据Vue.prototype.$axios &＃61; axiosVue.config.productionTip &＃61; falsenew Vue({ render: h &＃61;> h(App), router, store,}).$mount(&＃39;#app&＃39;)

login.vue进行引用

后台登录

vuex其实在这里是可以不用的&＃xff0c;不过因为以后可能会用到&＃xff0c;所以就学习了一下&＃xff0c; 写了进来。

登录目前就完成了。