项目简图
- 因为用vue-cli3生成的 eslint 代码检测方式跟大家常用的有所不同，大家初始化项目之后应该也会遇到一直报
warning的情况。因此，需要把.eslintrc.js中的内容改一下：将"eslint:recommended", "@vue/prettier"去掉，这样就不会一直报warning了。
// extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
extends: ["plugin:vue/essential"],
- 我将平时用的公共样式放进了
common.css，并且在main.js中进行了全局注册（可以免去很多麻烦比如a标签默认样式清除。。。），使用前先按照自己的设计稿把背景颜色改掉
common.css
- 引入了一个好看的弹框插件sweetalert，并且在main.js中注册，直接
swal("登陆成功", "success");就可以使用，详细配置见官网。
登陆弹框
一、如何上手？
1、先配置request文件夹中封装的axios，根据项目所需
- 先配置基础请求地址
// 使用自定义配置新建一个 axios 实例
const service = axios.create({
// 基础的请求地址
baseURL: 'https://some-domain.com/api/',
// 设置超时时间 5s
timeout: 5000
});
- 如果项目中有token的话，在请求拦截器中加入token
ACCESS_TOKEN是后台需要的token名字
localStorage.getItem('token')的token是在浏览器里，登陆的时候存token的名字
如果是说请求地址里或者请求数据中携带那就在api.js中请求携带的参数里自己加就ok
// 请求的时候在头部加上请求的token
service.interceptors.request.use(config => {
if (localStorage.getItem('token')) {
config.headers.ACCESS_TOKEN = localStorage.getItem('token');
}
return config; // 有且必须有一个config对象被返回
}, error => {
// 对请求错误做些什么
console.log(error);
return Promise.reject();
});
- 响应拦截器
比如response.status判断时报400-500的错时候，有token过期的，那就再浏览器中将token清除，然后跳转登陆
// 清除token
localStorage.removeItem("token");
// 跳转登录
setTimeout(() => {
window.location.href = "/login";
}, 1000);
2、先根据自己的需求写自定义页面组件，比如导航栏，登陆注册啥的。
自定义组件
在
home.vue文件中，将导航栏之类的组件传入，注意，有<router-view></router-view>在这个大组件之下的页面才能够自由跳转。这样写主要是为了有多个组件时可以封装成一个大组件。
<!-- 页面主体，将头部作为组件传入 -->
<template>
<div class="wrapper">
<v-header></v-header>
<transition>
<router-view></router-view>
</transition>
</div>
</template>
<script>
// 引入头部组件
import vHeader from "./header";
// 引入xxxxxxx 组件
export default {
data() {
return {};
},
components: {
vHeader
}
};
</script>
这个大组件的作用，具体表现在router文件夹中的 index.js中，这样写之后，登陆注册和主页就可以在头部导航栏下自由切换了。
{
path: '/',
component: resolve => require(['@/components/common/home.vue'], resolve),
redirect: '/index',
meta: { title: '全局文件' },
children: [
{
path: '/login',
component: resolve => require(['@/components/login-register/login.vue'], resolve),
meta: {
title: '登陆'
}
},
{
path: '/register',
component: resolve => require(['@/components/login-register/register.vue'], resolve),
meta: {
title: '注册'
}
},
{
path: '/index',
component: resolve => require(['@/views/index.vue'], resolve),
meta: {
title: '系统首页'
}
},
// 之后只要有页面就放在下面
]
},
3、在views中将自己的页面写好之后，配置路由和导航守卫
在大组件下切换的方式按照上面那样写就ok，如果想显示一个单独的页面，只需要跳出这个大包围，在下面新写一个就ok。
比如未登录不能进入其他页面，可以使用导航守卫，检测token是否存在
/* 导航守卫, 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆 */
router.beforeEach((to, from, next) => {
if (to.path === '/login' || to.path === '/register') {
next();
} else {
let token = localStorage.getItem('token');
if (token === null || token === '' || token === undefined) {
next('/login');
} else {
next();
}
}
});
