怎么看别人的项目

进入公司后，不可能一直做新项目，大多数都是从上一个同事的项目手上开始入手，或者说参与到团队中来开发项目；因此读懂一个项目并能快速的实践是重中之重。下面我将对新手入职新公司怎么了解的项目讲一讲我的见解。

项目介绍

常用的项目，有项目介绍，如果优先从项目介绍入手，这是上手项目最快速的方式，比如：

Vue-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

以上没有怎么办：

依赖文件

看 package.json 比如：

{
  "name": "name",
  "version": "3.8.1",
  "description": "管理系统",
  "author": "管理系统",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
      "build:prod": "vite build",
    "build:stage": "vite build --mode staging",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "0.2.6",
    "axios": "0.24.0",
    "echarts": "5.2.2",
    "element-plus": "2.0.1",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.6",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.2.1",
    "nprogress": "0.2.0",
    "vue": "3.2.26",
    "vue-cropper": "1.0.2",
    "vue-router": "4.0.12",
    "vuex": "4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "1.9.4",
    "@vue/compiler-sfc": "3.2.22",
    "sass": "1.45.0",
    "unplugin-auto-import": "0.5.3",
    "vite": "2.6.14",
    "vite-plugin-compression": "0.3.6",
    "vite-plugin-svg-icons": "1.0.5",
    "vite-plugin-vue-setup-extend": "0.1.0"
  }
}

从上dependencies中可以可以看出，使用了 vue3、axios、icons图标、echarts图表、elementUI、file-saver导出文件、js-cookie、nprogress进度条、路由，数据缓存、复制、加密等等一些功能；

devDependencies中能看到使用的工具，如vite、saas等。

大致用的功能已经知道了，那么就从入口文件开始查看。

配置文件

• vite.config.js 或 vue.config.js (react则看React相关的配置文件如craco.configjs等) 配置文件不会做太多事，一般都是解析，编译，优化等，主要看看常用的一些快捷功能，方便后面直接使用；如：

图表：

import svgIcon from 'vite-plugin-svg-icons'
import path from 'path'

export default function createSvgIcon(isBuild) {
    return svgIcon({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: isBuild
    })
}

全局配置：

 // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.xxx.xxx/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.xxx/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

别名：

{
  alias: {
    // 设置路径
    '~': path.resolve(__dirname, './'),
    // 设置别名
    '@': path.resolve(__dirname, './src')
  },
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},

跨域： 主要处理请求后端接口是：

proxy: {
  '/dev-api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    rewrite: (p) => p.replace(/^\/dev-api/, '')
  }
}

入口文件

• main.js 基本形式就像下面这样，所有的配置都是从这里查找，有的是直接在main.js中可以看，有的是引用，通过引用再去里面看，比如store数据共享，router路由配置都是在里面；

import { createApp } from 'vue'

import Cookies from 'js-cookie'

import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言

import '@/assets/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive


// 注册指令
import plugins from './plugins' // plugins
import { download } from '@/utils/request'

// svg图标
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'

/**
 * permission这个是权限 ， 一搬会做一些请求或打开页面前的操作，如身份验证，用户登录有效期等
 * 
*/
import './permission' // permission control

import { useDict } from '@/utils/dict'
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel } from '@/utils/ruoyi'

// 分页组件
import Pagination from '@/components/Pagination'
// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar'
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 自定义树选择组件
import TreeSelect from '@/components/TreeSelect'
// 字典标签组件
import DictTag from '@/components/DictTag'

const app = createApp(App)

// 全局方法挂载
app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime
app.config.globalProperties.resetForm = resetForm
app.config.globalProperties.handleTree = handleTree
app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.selectDictLabel = selectDictLabel

// 全局组件挂载
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('TreeSelect', TreeSelect)
app.component('FileUpload', FileUpload)
app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)

app.use(router)
app.use(store)
app.use(plugins)
app.use(elementIcons)
app.component('svg-icon', SvgIcon)

directive(app)

// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {
  locale: locale,
  // 支持 large、default、small
  size: Cookies.get('size') || 'default'
})

app.mount('#app')

权限、路由拦截

一般就是去登录页，或去其它的页面，获取用信息等常用操作

NProgress.configure({ showSpinner: false })
// 以下是白名单不需要操作
const whiteList = ['/login', '/auth-redirect', '/bind', '/register']

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
            store.dispatch('LogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
            })
          })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

目录结构

大多数项目都是这样的结构，命名方式也好阅读

├── vue.config.js/                      # webpack 配置文件；
├── config/                             # 与项目构建相关的常用的配置选项；
│   ├── index.js                        # 主配置文件
│        
├── src/        
│   ├── main.js                         # webpack 的入口文件；
│   ├── App.vue                         # APP页面入口
│   ├── assets/                         # 共用的代码以外的资源，如：图片、图标、视频 等；
│   ├── api/                            # 网络模块，如：接口；
│   ├── router/                         # 路由模块
│   ├── I18n/                           # 国际化模块
│   ├── directive/                      # 指令
│   ├── vuex/                           # 组件共享状态
│   ├── libs/                           # 工具
│   ├── components/                     # 共用的组件；； 这里的存放的组件应该都是展示组件
│   │   ├── base/                       # 基本组件，如：共用的弹窗组件，loading加载组件，提示组件。              
│   ├── utils/                          # 共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等；        
│   │   ├── util/                      # 自己封装的一些工具
│   │   └── ...        
│   ├── layout                          # 公共局页面；
│   └── view/                           # 存放项目业务代码；
│       ├── home                        # 首页；
│       ├── application-service         # 应用服务
│       ├── image                       # 镜像
│       ├── team                        # 团队成员
│       ├── code-manage                 # 代码管理
├── App.vue                             # app 的根组件；
├── public/                             # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下；        
├── .babelrc                            # babel 的配置文件
├── .editorconfig                       # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js                        # eslint 的配置文件
├── .eslintignore                       # eslint 的忽略规则
├── .gitignore                          # git的忽略配置文件
├── jsconfig.json                       # 别名配置，用于ctrl+鼠标左建查看文件
├── package.json                        # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md                           # 项目信息文档

统一接口请求

一搬做一些常用的请求，报错，权限认证，取消请求等：

• 配置
• 超时
• 请求地址
• 头部信息

• 请求前处理
• Authorization
• 重复提交
• post、get特殊处理
• 失败或异常

• 响应拦截器
• 状态码
• 错误信息
• 二进制数据则直接返回
• 401
• 500
• 非200
• 错误或异常

全局配置

常用的一些配置，这些配置一定是整个项目中经常出现的部分才会用到；

一搬在main.js中出现如下：

• 全局指令
• hasRole按钮权限等
• hasPermission角色权限

• 全局方法
• 下载
• 时间
• 日期等

• 全局组件
• 分页
• 上传
• 图片预览
• 标签等

公共组件

常用的一些公共组件，这些组件常用，或某一些页面中要用到；如下：

• 表单
• table
• 动画
• 时间
• 图片裁剪
• 编辑器
• 弹窗
• 抽屉
• 详情
• 验证
• 二维码
• 上传
• 加载
• 图标
• 打印
• 水印
• 日志

常用工具

常用的一些功能如下：

• 右键
• 缓存
• 权限密码等生成
• 字典数据
• 常用报错或提示
• 表格时间格式化
• 克隆
• 合并
• 截流
• 防抖
• 首字母大小
• 验证等

路由配置

• 404报错
• 401没有权限
• 最外层封装
• 左侧栏目
• 导航栏目
• 标签

• 重定向
• 全局匹配

数据配置

数据比较简单就是常有的一些功能如下：

• modules 模块部分
• app 平台信息
• user 用户信息

其它的和官方说明的基本一样。

最后

项目讲到这里就讲完了，基本就是几项操作就能看到别人完整的配置流程，公共代码，这样就能快速上手操作了。

1. README.md 帮助文档
2. package.json 配置
3. main.js 入口
1. 全局组件
2. 全局方法
3. 全局指令

1. router 路由
2. store 数据存储
3. components 公共组件
4. utils 常用工具