vue3下的项目src目录架构以及详解

vue3下的项目src目录架构以及详解

先给结论

各个目录详细解释

api： 发送后端的请求的各个请求函数

示例：
这是request工具函数

//utils/request.js
import axios from 'axios'
import { getSecret } from '@/utils'
import store from '@/store'
const server = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout: 5000
})

server.interceptors.request.use(
  (config) => {
    const headers = config.headers || {}
    config.headers = {
      Authorization: `Bearer ${store.getters.token}`, // 请求头中携带token
      ...headers,
      ...getSecret()
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

server.interceptors.response.use(
  (response) => {
    const { success, message, data } = response.data
    console.log(response.data)
    if (success) {
      return data
    } else {
      return Promise.reject(message)
    }
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default server

这是api下的某个文件

//api文件夹下的某个接口
import request from '@/utils/request'  //导入请求函数(上面一个函数就是request函数）

//每个category页面要通过这个接口获取数据
export const getCategories = () => {
  return request({
    url: 'category'
  })
}

assets:资源文件夹（如css，icon，image等）

component （业务组件）

什么叫业务组件呢？业务组件，与具体业务有关。

在B站上，番剧这个组件需要在具体具体页面显示，其他网站不会出现番剧这个组件，因此可以认为是具体的业务组件

constant（vue项目中的常量，如css主体色，屏幕的最小宽度等等）（注意的是，一般大写表示为常量）

// 主题极简白
export const THEME_LIGHT = 'THEME_LIGHT'
// 主题极夜黑
export const THEME_DARK = 'THEME_DARK'
// 主题跟随系统
export const THEME_SYSTEM = 'THEME_SYSTEM'

directive（vue自定义指令）

我们常用的指令如v-for，v-mode等等都是vue官方指令，这个文件夹可以自定义指令

//自定义的一个指令，具体功能是将某个元素的背景设为某个值
export default {
  beforeMount(el, { value }) {
    el.style.backgroundColor = value
  }
}

//这个div将会展示为红色背景
<div
        v-bg-color="red"
      >red</div>

libs:通用组件

还是上面那个图，番剧这个业务组件可以抽象为一个通用组件；内部上下左右居中的字体外加一个浅灰色背景。此时国创这个业务组件也可以使用这个通用组件。

router：路由

路由使用index.js引入各个模块

store：vuex模块

index.js：引入各个模块
getters.js：定义快捷访问各个模块的get方法

//getters.js
export default {
  categorys(state) {
    return state.categorys.categorys
  },
  themeType(state) {
    return state.theme.themeType
  },
}

styles:css样式的通用处理模块（类似utils文件夹）（如一个过渡动画可以反复使用，消除浮动的scss函数等）

//面包屑的过渡动画
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.25s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-leave-active {
  position: absolute;
}
//路由的过渡动画
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

vendor：外部的函数模块（这里常常要引入第三方接口）

比如因为短信验证码接口，会给你一个官方的sdk，这里可以引入进去。

下图展示了引入人类行为认证的滑块

views:vue视图

番剧这个组件是可视化的，用户可以看见的就是视图