百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

工作中，前端开发要看项目，怎么查看别人的js项目代码

myzbx 2025-03-26 14:24 27 浏览

怎么看别人的项目

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

项目介绍

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

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 常用工具

相关推荐

怎么恢复7z文件 7z文件删除了怎么恢复

7z是一种压缩格式的文件，它运用LZMA压缩算法，该压缩算法的输出稍后被算数编码进行处理以便后续进一步压缩，压缩比十分高。我们可以将文件压缩成这种格式，便于传输，保存，占空间少。了解更多7z文件知识...

郎酒让消费者喝得明明白白 算术题里有答案

日前，『郎酒酱香产品企业内控准则』颁布，郎酒首次公开酱香产品生产全过程，公布酱香产品产能、储能及投放计划。随后，郎酒官微向消费者发出「品控算术题」有奖问答。郎酒亮出家底，消费者踊跃留言。8天后，谜底揭...

学龄前，比识字、算术更重要的是这三件事

“为了给孩子选择一家合适的幼儿园，我曾穿梭于纽约各家幼儿园的开放日，这些幼儿员既包括主流的公立幼儿园，还包括那些遥不可及的私人幼儿园。我的目的就是想了解他们的教育理念是什么，到底厉害在哪里，看看对于我...

参加CSP-J信奥赛需要掌握数学知识

在C++语法的学习中需要储备的数学知识如下①数据类型：需要知道整数、正整数、负整数、小数、判断对错②算术运算符：加法、减法、乘法、除法、取模运算③关系表达式：大于、大于等于、小于、小...

1g米饭能做多少深蹲?今天我们来算一算

减重我们都知道3分在练，7分在吃，吃这件事情上，真的是每一口都算数。今天我们来算一笔账，1粒米饭可以做多少事情？本着认真负责的态度，今天在食物秤上称了1g米饭，是16粒。根据能量换算：100g米饭是4...

web 自动化测试，一定得掌握的 8 个核心知识点

使用cypress进行端对端测试，和其他的一些框架有一个显著不同的地方，它使用JavaScript作为编程语言。传统主流的selenium框架是支持多语言的，大多数QA会的pytho...

大话C语言:赋值运算符（c语言中赋值运算符是什么）

赋值运算符是最基本的运算符之一，用于将右侧的值或表达式的计算结果赋给左侧的变量。它是一个二元运算符，意味着它需要两个操作数：一个是目标变量（左侧），另一个是要赋给该变量的值或表达式（右侧）。赋值运算符...

Vue进阶(幺幺伍):js 将字符串转换为boolean

Boolean();参数为0、null和无参数返回false，有参数返回true。Boolean("");//输出为：falseBoolean(null);//输出为...

mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)

1).大于，小于，大于或等于，小于或等于$gt:大于$lt:小于$gte:大于或等于$lte:小于或等于例子：db.collection.find({"field":{$gt:valu...

Python学不会来打我(21)python表达式知识点汇总

在Python中，表达式是由变量、运算符、函数调用等组合而成的语句，用于产生值或执行特定操作。以下是对Python中常见表达式的详细讲解：1.1算术表达式涉及数学运算的表达式。例如：a=5b...

C|数据存储地址与字节偏移、数据索引

话说C是面向内存的编程语言。数据要能存得进去，取得出来，且要考虑效率。不管是顺序存储还是链式存储，其寻址方式总是很重要。顺序存储是连续存储。同质结构的数组通过其索引表示位置偏移，异质结构的结构体通过其...

下班后累懵?4 个 JS 手写题帮你搞定前端面试高频考点

打工人下班后最痛苦的事，莫过于拖着疲惫的身子还要啃前端面试题吧？看着那些密密麻麻的JS代码，脑子都快转不动了！别担心，今天咱就用轻松的方式，带你吃透4道高频手写题，让你在面试时自信满满，再也不...

嵌入式数据库sqlite3【进阶篇】-子句和函数的使用，小白一文入门

sqlite在《嵌入式数据库sqlite3命令操作基础篇-增删改查，小白一文入门》一文中讲解了如何实现sqlite3的基本操作增删改查，本文介绍一些其他复杂一点的操作。比如where、orderby...

前缀表达式与后缀表达式（前缀表达式后缀表达式中缀表达式计算）

昨天晚上和儿子一起学习了前缀表达式和后缀表达式。这应该是字符串算式如何被计算机识别并计算的2种方法。本来是想先给他讲一个逆波兰式（后缀表达式），以后再讲前缀表达式。没想到他还挺聪明，很快就把2个都掌握...

Python快速入门教程1:基本语法、数据类型、运算符、数字字符串

Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、运算符、数字和字符串等内容，并附有使用实例场景。Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、...

一周热门
最近发表
标签列表