网站首页 > 基础教程 正文
怎么看别人的项目
进入公司后,不可能一直做新项目,大多数都是从上一个同事的项目手上开始入手,或者说参与到团队中来开发项目;因此读懂一个项目并能快速的实践是重中之重。下面我将对新手入职新公司怎么了解的项目讲一讲我的见解。
项目介绍
常用的项目,有项目介绍,如果优先从项目介绍入手,这是上手项目最快速的方式,比如:
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 常用工具
- 上一篇: Cookie 在爬虫中的应用
- 下一篇: javascript自学笔记:数组的迭代与归并方法
猜你喜欢
- 2024-11-26 Cookie 在爬虫中的应用
- 2024-11-26 55个JS代码让你轻松当大神
- 2024-11-26 操作cookie
- 2024-11-26 9个原生js库助力前端开发,你都用过吗?
- 2024-11-26 Selenium4+Python3系列(七) Iframe、常见控件、JS、Cookie操作
- 2024-11-26 浅谈JavaScript的用处
- 2024-11-26 Web安全:XSS怎么实现?Cookie 劫持如此简单,你的网站安全吗?
- 2024-11-26 Cookies和Session的区别和理解
- 2024-11-26 cookie是什么?有什么用?cookie详解,一篇文章彻底搞懂cookie
- 2024-11-26 python+selenium文件上传,Cookie操作,调用 JS,窗口截图
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)