- 使用了vue3 + vue-router(4.x) + vuex(4.x) + Element3
- 主要的功能有登录的逻辑 和 简单的登录鉴权
- 首先要确保安装最新的脚手架，如果没有安装，可按一下操作来升级：
- npm install -g npm // 升级npm 到最新的版本
- npm uninstall -g @vue/cli // 删除旧的脚手架
- npm install -g @vue/cli // 安装最新的脚手架
- 在terminal运行 vue create project-name，接着会出现下图：
- 官方地址: https://element3-ui.com/
- 安装步骤（全部导入方式）
- 在项目的根目录运行 npm install element3 -S
- 在mian.js 文件添加如下代码，
import { createApp } from 'vue'
import App from './App.vue'
// 下面这两行代码是要自己去添加的
import Element3 from 'element3'
import 'element3/lib/theme-chalk/index.css'
// 最后以插件的方式挂载
createApp(App).use(Element3).mount('#app')
- 为了简单就写了两个页面，logig 和 home页面
- 主要代码如下：
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: import("../views/Home.vue")
},
{
path: '/login',
name: 'Login',
component: import("../views/Login")
},
{
path: "/:pathMatch(.*)*",
redirect: to => {
return { path: '/' };
}
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
- 为了配合vue3，所以vue-router4 的写法也存在了一些差别，想要知道vue-router4的小伙伴可以参照我的vue-router4
- 这里值得注意的一点是 路由的匹配 , path: '/:pathMatch(.*)*' 相当于是 path:"*" ,现在要匹配路由需要用正则去匹配
- 主要也是写法存在差异，想要知道具体用法可以参考vuex4
- 代码如下:
import { createStore } from 'vuex';
export default createStore({
state: {
userInfo: JSON.parse(sessionStorage.getItem('useInfo') || '{}'),
},
getters: {
userInfo: state => state.userInfo
},
mutations: {
changeUserInfo(state, payload) {
state.userInfo = payload;
}
},
actions: {
EDIT_USER_INFO({ commit }, payload) {
return new Promise((res,rej)=>{
commit('changeUserInfo', payload || {});
sessionStorage.setItem('useInfo', JSON.stringify(payload));
res(12233);
})
}
},
modules: {}
});
- 然后，在main.js文件中统一以插件的方式挂载即可
- 因为主要的功能都在登录页，所以就以登录页为主，看一下vue3页面的基本结构和Element3的基本使用
<template>
<div class="login">
<div class="container">
<el-form ref="formRef" :rules="rules" :model="form">
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
<el-row type="flex" justify="center">
<el-button type="primary" @click="submit"> 登录</el-button>
</el-row>
</div>
</div>
</template>
<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
name: 'Login',
setup() {
const formRef = ref(null);
const router = useRouter();
const store = useStore();
const form = reactive({
userName: '',
password: '',
});
const rules = reactive({
userName: [{ required: true, message: '请填写用户名', trigger: ['blur', 'change'] }],
password: [{ required: true, message: '请填写密码', trigger: ['blur', 'change'] }]
});
const submit = () => {
formRef.value.validate(async valid => {
if (!valid) return;
await store.dispatch('EDIT_USER_INFO', form);
router.push({
path: '/'
});
});
};
return {
form,
rules,
formRef,
submit,
};
}
};
</script>
- 眨眼一看是不是vue2的结构更加工整，查找数据什么的也比较方便，比较集中
- 这个页面主要做了两件事情，登录信息存储到**仓库 和 页面的跳转，
- 如果想看vue3更多api的基本用法，请查阅这两个笔记 vue3 api(上)、 vue3 api(下)
- 利用vue-router的钩子函数，router.beforeEatch，该函数接受3个参数:
- to : 将要前往的路由信息
- form : 离开路由的路由信息
- next : 是一个方法，需不需要进入该路由，如果需要进入则:next(),如果没有写，则页面会一直处在空白页，
- 在上面的函数中我们只需要做两件事情：
import router from './router/index';
import store from './store/index';
router.beforeEach((to, from, next) => {
const { userInfo } = store.getters;
if (Object.keys(userInfo).length) {
// 已登录
if (to.name === 'Login') {
next({
name: 'Home'
});
}
next();
} else {
// 未登录
if (to.name === 'Login') next();
next({
name: 'Login'
});
}
});