vue模板项目地址

项目简图

• 因为用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();
    }
  }
});