工作中，前端开发要看项目，怎么查看别人的js项目代码
怎么看别人的项目
进入公司后，不可能一直做新项目，大多数都是从上一个同事的项目手上开始入手，或者说参与到团队中来开发项目；因此读懂一个项目并能快速的实践是重中之重。下面我将对新手入职新公司怎么了解的项目讲一讲我的见解。
项目介绍
常用的项目，有项目介绍，如果优先从项目介绍入手，这是上手项目最快速的方式，比如：
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 用户信息
其它的和官方说明的基本一样。
最后
项目讲到这里就讲完了，基本就是几项操作就能看到别人完整的配置流程，公共代码，这样就能快速上手操作了。
- README.md 帮助文档
- package.json 配置
- main.js 入口
- 全局组件
- 全局方法
- 全局指令
- router 路由
- store 数据存储
- components 公共组件
- utils 常用工具