vue+elementUI+vue router+vuex综合demo

最新推荐文章于 2024-08-19 17:30:02 发布

原创最新推荐文章于 2024-08-19 17:30:02 发布 · 755 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

1 篇文章

订阅专栏

1.初始化工作
安装node.js
一路next
安装node.js会一并安装npm
验证方式，cmd观察版本号能否正常显示

node -v
npm -v

安装vue脚手架vue-cli

npm install vue-cli -g --registry=https://registry.npm.taobao.org

显示所有模板，正常显示则说明安装依赖成功，一般使用webpack模板

vue list

命令行 vue-cli的webpack模板，初始化工程
vue init webpack hello-vue-element3
全部回车，并选择no，因为要自己使用国内淘宝源加速，以及自己手动npm run dev

cd hello-vue-element3

安装依赖

npm install --registry=https://registry.npm.taobao.org

验证初始化的工程是否ok

npm run dev

访问localhost:8080

IDEA安装 Vue插件

导入IDEA
注意：如果IDEA的命令行不能使用npm run dev，使用管理员启动IDEA试试

删除脚手架工程中的Hello World Component相关代码

2.构建登录页面和主页面的路由，从登录页跳转到主页面。

手动安装路由，使用淘宝源

npm install vue-router --save-dev --registry=https://registry.npm.taobao.org

新建src/router/index.js集中配置所有路由

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
	routes: [
	   {
		  name: 'Login',
		  path: '/login',
		  component: Login
	   },
	   {
	     name: 'Main',
	     path: '/main',
	     component: Main
	   }
	]
})

新建src/views/Login.vue

main.js中使用router目录

import router from './router'
new Vue({
	router,
})

App.vue中使用router-link,router-view标签验证路由是否成功。
最后要删除两个标签，
因为要通过浏览器访问http://localhost:8080/#/login 以及 http://localhost:8080/#/main

<router-link to="/login">登录</router-link>
<router-link to="/main">主页</router-link>
<router-view />

引入elementUI

安装 element-ui

npm i element-ui -S --registry=https://registry.npm.taobao.org

安装 SASS 加载器，这个下载很慢，安装失败貌似也没影响

npm install sass-loader node-sass --save-dev --registry=https://registry.npm.taobao.org

main.js中引入js库和css库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 显式调用插件
Vue.use(ElementUI);

// 添加render
new Vue({
render: h => h(App),
})

结合ElementUI官网示例代码，带有验证的表单，填充Login.vue

注意一定要使用函数对象的方式来申明表单中的字段

  export default {
        name: "Login",
        data() {
          return {
            form: {
              username: '',
              password: ''
            }

          }
        }
    }

用methods申明表单提交方法：

methods: {
        onSubmit: function () {
          alert(this.form.username + '>>>' + this.form.password);
		  this.$router.push('/main');
        }
      }

// js实现从Login跳转到main
this.$router.push('main')

表单验证，有elementUI的html代码以及js校验逻辑

主页Main，参考elementUI的Container布局

新建src/views/user/List.vue 和Add.vue

在src/router/index.js配置Main的子路由

import Vue from 'vue'
import Router from 'vue-router'
import UserList from '@/views/user/List'
import UserAdd from '@/views/user/Add'

Vue.use(Router);
export default new Router({
	routes: [
	   {
		  name: 'Login',
		  path: '/login',
		  component: Login
	   },
	   {
	     name: 'Main',
	     path: '/main',
	     component: Main,
	     children: [
	       {name: 'UserList', path: '/user/list', component: UserList},
	       {name: 'UserAdd', path: '/user/add', component: UserAdd}
         ]
	   }
	]
})

Main中配置router-link, router-view

<router-link to="/user/list">用户列表</router-link>
<router-link to="/user/add">新增用户</router-link>
<router-view/>

使用vuex做状态管理

在项目根目录执行如下命令来安装 Vuex

npm install vuex --save --registry=https://registry.npm.taobao.org

修改 main.js 文件，导入 Vuex

import Vuex from 'vuex'
Vue.use(Vuex);

利用路由钩子 beforeEach 来判断用户是否登录，期间会用到 sessionStorage 存储功能。
在main.js捕获所有的路由事件，
根据isLogin标注位判断是否已经登录

router.beforeEach((to,from,next)=>{
  // debugger
  let isLogin = sessionStorage.getItem("isLogin");

  // next()表示放行，安装原先的跳转逻辑放行
  // next({path:"/xxx"})，表示自定义跳转逻辑
  // 一般来说，二者选其一
  if (to.path=="/logout")
  {
    sessionStorage.clear();
    next({path:"/login"})
  }
  else if(to.path=="/login")
  {
    if(isLogin=="true")
    {
      next({path:"/main"})
    }
    else
    {
      next()
    }
  }
  else if (isLogin==null)
  {
    next({path:"/login"})
  }
  else
   {
     next();
   }
  console.log("into beforeEach,from.path="+from.path+",to.path="+to.path+",next.path="+next.path);
})

新建 src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 分别定义4个const
constant state = {
  user: {
    username: '',
  }
};
constant getters = {
  getUser(state) {
    return state.user;
  }
};
// mutations可以改变state的值，但是它是同步的，性能低
constant mutations = {
  updateUser(state, user) {
    state.user = user;
  }
};
// actions是异步的，性能高，一般通过actions调用mutations方法
constant actions = {
  asyncUpdateUser(context, user) {
    context.commit('updateUser', user);
  }
}
export default new Store({
	state,
	getters,
	mutations,
	actions
});

main.js中使用store

import store from './store'
new Vue({
el: '#app',
store,
});

在Login.vue中调用vuex，通过actions异步调用

this.$store.dispatch('asyncUpdateUser', this.form);

在Main.vue中读取已登录的用户名

{{this.$store.getters.getUser.username}}

解决vuex里的保存的用户名，F5后消失问题
在App.vue中，捕捉页面刷新事件

mounted() {
    window.addEventListener('unload', this.saveState);
  },

  methods: {
    saveState: function () {
      // 页面刷新unload事件，只能通过console.log,控制台一闪而过。alert是看不出效果的。
      // 刷新则存储state json串到sessionStorage
      sessionStorage.setItem("state", JSON.stringify(this.$store.state));

    }

修改store/index.js

const state = sessionStorage.getItem("state") != "undefined" ? JSON.parse(sessionStorage.getItem("state")) : {
  user: {
    username: ''
  }
};

Vuex.Store还支持模块化
新建src/store/user/user.js

const user = {
  state: {
	user: {
	  username: ''
	}
  },
  getters: {
    getUser(state, user) {
	  return state.user;
	}
  },
  mutations: {
    updateUser(state, user) {
	  state.user = user;
	}
  },
  actions: {
    asyncUpdateUser(context, user) {
		context.commit('updateUser', user);
	}
  }
  export default user;
}

修改store/index.js

import user from './modules/user'
export new Vuex.Store({
	modules: {
	  user,
	}
});

this.$store.dispatch('asyncUpdateUser', this.form);

Main.vue展示登录的用户名

{{this.$store.getters.getUser.username}}

App.vue捕获刷新事件，把vuex state存入sessionStorage

sessionStorage.setItem('state', JSON.stringify(this.$store.state.user));

src/store/user/user.js修改为

state = sessionStorage.getItem("state")!="undefined"?JSON.parse(sessionStorage.getItem("state")):{
  user: {
    username: ''
  }
}

小总结：
1.使用sessionStorage保存了是否登录的标志位isLogin true/false
2.使用vuex（state,getters,mutations,actions）保存，获取，同步修改，异步修改当前登录的用户名
3.页面刷新vuex的state会重置，所以捕获unload事件，把当前用户名存入sessionStorage。
state优先从sessionStorage中读，如果有则JSON.parse。如果没有，则重新初始化