Vue 开发流程

1：添加路由规则
路由规则在router/index.js 中编写；在入口文件main.js中导入router文件，当我们需要为项目编写路由规则时，就需要在router/index.js 中编写。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/layout'

/**
 * constantRoutes
 * 公共路由 默认路由 
 * 
 */
export const constantRoutes = [

  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  }
]

const createRouter = () => new Router({
  mode: 'history', // 默认路由模式  hash或者history模式
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher 
}
export default router

2：添加要跳转的路径
在添加路由规则时，通过component属性可以设置要跳转的路径，并且需要在对应的路径上创建对应的文件。
如 ：component: () => import('@/views/error-page/404')(注：404是.vue文件)

3：定义接口路径
在页面中引入api下的js文件，该文件中定义了接口路径的一部分。
接口路径的另一部分是 config/dev.env.js 中的BASE_API属性，BASE_API与url共同构成了项目页面的访问路径。

import request from '@/utils/request'

export function selBzchByFile(query) {
  return request({
    url: '/user/userinfo',
    method: 'post',
    data: query
  })
}

4：使用axios进行接口调用
使用axios进行接口调用，把接口返回数据在页面
axios({
  method: 'post',
  url: 'http://test.cn/pel/expInfo', // 请求地址
  data: this.listQuery, // 参数
  responseType: 'blob', // 表明返回服务器返回的数据类型
  headers: {
    'token-auth' : getToken(),
    'Content-Type': 'application/json'
  }
}).then(res => {
  const link = document.createElement("a");
  let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
  link.style.display = "none";
  link.href = URL.createObjectURL(blob);
  link.setAttribute("download", decodeURI(res.headers['filename']));
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  setTimeout(() => {
  this.listLoading = false
}, 1.5 * 1000)
}).catch(err => {
  console.log(err)
});