asp登录页面跳转到注册页面_登录页面集成vuex，完善前端登录页面样式

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

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

使用 Form 组件

里面都太复杂了，随便参考一个

后台登录

登录 {{$store.state.user.userDetail.userId}}

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

在简单的添加一下样式

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

Vuex的使用，先看下目录结构

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

user.js

var state= {    userDetail:{        userId:'test'    }}var mutations={    setUser(state,user){        state.userDetail = user;    }}export  default {    state,    mutations}

store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import user from './module/user'const store = new Vuex.Store({    modules: {        user    }})export default store

main.js进行引用

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

login.vue进行引用

后台登录

登录 {{$store.state.user.userDetail.userId}}

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

登录目前就完成了。