vue项目目录结构

基本上要做的事都在src下

components里放的是可复用的组件

//引入组件
import ... from '@/components/Breadcrumb'
//注册组件
components: {
    Breadcrumb
},
//使用组件
<breadcrumb class="breadcrumb-container" />

icon下是svg图标库，里面有菜单icon和按钮icon

 

layout是一个公用的布局

我们的公用布局是由顶部导航栏navbar和appmain主要内容组成，一般情况下还会有侧边栏siderbar

<div class="main-container">
      <div class="fixed-header">
        <navbar />
      </div>
      <app-main />
</div>

router是路由配置，他必填的两个属性是path和component

 {
     path: "/login",
     component: () => import("@/views/login/index"),
     hidden: true
 },

再复杂一点的是嵌套路由，第一层套用layout，他的子路由的视图会延用layout

{
    path: "/admin",
    component: Layout,
    meta: { title: "人力资源管理" },
    hidden: true,
    children: [
      {
        path: "/admin",
        component: () => import("@/views/dashboard/SubMenu"),
      },
      {
        path: "/admin/jurisdiction",
        meta: { title: "权限分配" },
        component: () => import("@/views/admin/jurisdiction"),
      },
    ]
},

面包屑的层级关系依赖于路由的层级嵌套关系

根据路由配置的meta中的title字段过滤

然后把主页放在第一个

let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)

 

styles里放的是样式文件

在main.js中引入公用样式import '@/styles/index.scss'

 

utils里放的是工具类函数和封装请求

封装请求

和后台交互获取数据这块，我们通常使用的是axios库

引入axios import axios from 'axios'

axios提供了create方法创建一个service实例，

设置请求超过时间

service的interceptors属性，中文是拦截器的意思

在每次请求接口的时候，都会在请求的header中携带token，后端可以根据你携带的token来判断你的登录是否过期

响应拦截器就是服务器返回给我们的数据，debugger一下response，我们要的就是这个res，其他的都是axios配置，我们在拿到之前可以对他进行一些处理

封装post方法

最后export default service

在main.js里引入import request from '@/utils/request'

挂载到vue实例上Vue.prototype.$axios = request;

这样我们可以在页面上写this.$axios.post去请求接口

 

views中是每个页面的vue文件，命名和路由的命名基本上是一样的

我一般会放一个a文件夹在里面，整理出一些频繁用到的东西，表单相关，新增页列表页详情页，这样你就不用再去官网去翻api了 

main.js是入口文件

上线的话要打包在终端运行命令npm run build开始打包，生成的文件都在dist文件夹下，丢到服务器上

App.vue项目入口文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>