登录页面简单的实现了,不过没有对页面进行美化一下,今天对页面进行一下美化。
elementui已经集成进来了。所以就直接进行使用
使用 Form 组件
![1451e90d30186a396412fd4e3ed676bf.png](https://i-blog.csdnimg.cn/blog_migrate/549f19a367a49e58faf69fb239c6f5a3.jpeg)
里面都太复杂了,随便参考一个
后台登录
登录 {{$store.state.user.userDetail.userId}}
上面的代码, 里面放置 , 里面再放置其它的内容,比如 ,关于 和 的属性,查看官方文档,
在简单的添加一下样式
这样登录页面的效果就展示出来了
![26e473df691e93060f70a84c56c4aa33.png](https://i-blog.csdnimg.cn/blog_migrate/b1da8c4a319927b66f27b224122e5537.jpeg)
Vuex的使用,先看下目录结构
![f83140aeff17f8c6f9f0d640a34b63cb.png](https://i-blog.csdnimg.cn/blog_migrate/17f96524ea4e6cf05547d5fc1402c5e5.jpeg)
新建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其实在这里是可以不用的,不过因为以后可能会用到,所以就学习了一下, 写了进来。
登录目前就完成了。