# hiaosin **Repository Path**: wang_zhen_hao/hiaosin ## Basic Information - **Project Name**: hiaosin - **Description**: 杭州骁讯科技有限公司 骁讯通 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-01-16 - **Last Updated**: 2024-01-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 安装 ``` cmd npm i 或 yarn install ``` # 运行 ``` cmd npm run dev 或 yarn dev ``` # 目录文件定义 ``` > node_modules 依赖包 > public 不被打包的公用项 > favicon.ico 网站ico文件 > config.json 自定义内容配置文件 "serves":{ "api":"http://58.246.129.150:8772/", //后台api地址 "timeout":180000//超时时间设定 } > src 项目文件 > apis mock api文件 > assets baseImg 项目图片文件夹 common:公用图片 login:登录页面图片 iconfont 字体图标文件 （阿里巴巴矢量图标库导出内容） styles 样式表文件 commom.scss 公用样式表，所有样式表引入的地方 breadcrumb.scss 面包屑导航 header.scss 头部文件样式表 login.scss 登录页面样式表 pagination.scss 分页组件样式表 plugin.scss 插件、组件 样式表 setting.scss 样式配置表，用于 主题颜色快速配置 slider.scss 左侧菜单样式表 table.scss 列表组件样式表 > components 组件内容 Control 小控件组件 Button.vue 按钮组件 Dialog 弹出框组件 Table 列表相关组件 Pagination.vue 分页 Table.vue 表格 Upload 上传相关组件 dialogUpload.vue 弹框上传和导出模板组合 fileUpload.vue 文件类上传 imgUpload.vue 图片类上传 > hooks composition API封装 locales 多语言模块方法 > locales 多语言配置模块 > mock 模拟数据 > router 路由 > store 状态管理器 > utils 公共文件 global.ts 公用方法模块 mockRequest.ts 使用mock api请求封装 request.ts axios交互方法封装 service.ts axios实例配置，请求拦截等 > views vue文件 > App.vue 入口文件 > main.ts ts入口文件 > vite-env.d.ts 项目环境变量配置 > .gitignore git上传过滤文件 > index.html 入口页面 > package.json 依赖配置文件 > README.md 项目描述文件 > tsconfig.json 、tsconfig.node.json 设置运行约束/限制 1、浏览器运行环境(src文件夹) 2、vite 本身(包括配置)，在node内运行 ``` # vite 和 webpack 描述和区别 ``` > vite是什么? Vite是一个基于ES modules的构建工具和开发服务器，旨在实现快速的开发体验。它使用ES modules作为开发时的原生模块系统，并通过浏览器原生支持的ES modules特性，实现了快速的模块热更新。 Vite还支持在开发过程中使用Vue、React、Preact等框架，并提供了对TypeScript、CSS等的支持。 Vite的特点包括： 快速的启动速度和热更新速度 基于ES modules的开发体验 支持多种框架和语言 内置开发服务器和构建工具 总之，Vite是一个轻量级、快速、现代化的开发工具，适用于现代Web应用程序的开发。 > webpack是什么? Webpack是一个现代化的静态模块打包工具。它可以将多个模块（包括JavaScript、CSS、图片等）打包成一个或多个静态资源文件，以便在浏览器中加载和使用。 Webpack最初是为Web应用程序开发而设计的，但它也可以用于其他类型的应用程序，如Node.js应用程序。 Webpack的主要特点包括： 模块化：Webpack支持模块化开发，可以将应用程序拆分为多个模块，使代码更加可维护和可扩展。 转换器：Webpack内置了许多转换器（loader），可以将各种类型的文件转换为JavaScript模块。 插件：Webpack还提供了许多插件（plugin），可以用于代码压缩、文件合并、图片压缩等功能。 开发服务器：Webpack提供了开发服务器，支持热模块替换（HMR）功能，可以在开发过程中实时预览应用程序的变化。 易于扩展：Webpack具有丰富的插件系统和可配置选项，可以灵活地适应不同的开发需求。 总之，Webpack是一个功能强大、灵活、易于扩展的静态模块打包工具，被广泛应用于Web应用程序的开发中。 > vite 和 webpack 区别 Webpack和Vite都是现代化的前端构建工具，但它们有以下几点区别： 构建速度：Vite的启动速度和模块热更新速度比Webpack更快，尤其是在开发过程中，Vite可以实现即时更新，不需要重新编译整个项目。 构建方式：Webpack是基于打包的构建方式，而Vite则是基于ES modules的构建方式，利用浏览器原生支持的ES modules特性，实现了快速的模块热更新。 配置方式：Webpack需要通过复杂的配置文件来管理项目，而Vite则采用了约定大于配置的方式，减少了项目配置的复杂度。 生态系统：Webpack拥有庞大的生态系统和社区支持，可以满足复杂的项目需求，而Vite相对来说还比较年轻，生态系统和社区还在发展中。 适用场景：Webpack适用于各种类型的项目，特别是大型复杂的Web应用程序，而Vite则更适合于中小型应用程序的开发，尤其是单页面应用程序。 ``` # 组件 # Table 组件 /components/Table/Table; ``` dataList：数据源 dataHead：表头数据 { datatype：列类型 file：文件，string：字符串，number：数字，fun：自定义函数 isMin:是否设置为最小宽度， width：列宽 label：列名 orderby：设定排序字段 align：设定 布局 isSortable: prop:字段 isSortable：是否排序 fixed：设置固定 isTooltip：是否显示全部 fileProp：文件路径字段 fun: 自定义函数 } actionWidth: 操作项列宽 isSelection: 是否显示勾选框 checkbox dataActions：列表操作项 { title:'',//名称 icon:'el-haaenclean-detail',//操作icon btnType:'primary',//按钮的样式 callback:'addOrUpdate',//按钮点击方法 ，同时 使用的地方需要 定义一个 方法 fun: 函数 定义是否显示 isScope: ，true 返回整条数据 ，false 只返回id } emptyText:列表显示描述内容 loading：列表冻结层 permission：操作权限 page：当前页码 pageSize：当前条数 isNotPagination：是否 不存在 分页 tableHeight：列表高度 @handleSelectionChange ：选中 多选框 回传函数 @sortChange ： 排序回传 ``` # 分页组件 components/Table/Pagination.vue ``` page ：当前页码 pageSize ： 当前使用条数 totalCount ： 总条数 @pageChange ： 分页修改回传 @handleSizeChange ：条数修改回传 ``` # 文件上传 components/Upload/fileUpload; 列表展示 ``` fileList ： 文件列表数据 size ： 允许上传的文件大小 acceptlist ： 允许上传的格式 ， 文件后缀名，多个用逗号分割 @uploadSucess ： 上传成功回传 @delFile ： 删除文件回传 prop: 当前字段 可以为空 ``` # 图片上传 components/Upload/imgUpload; 照片缩略图模式展示 ``` fileList ： 文件列表数据 size ： 允许上传的文件大小 acceptlist ： 允许上传的格式 ， 文件后缀名，多个用逗号分割 @uploadSucess ： 上传成功回传 @delFile ： 删除文件回传 prop: 当前字段 可以为空 ``` # 文件上传 模版导出 组合 components/Upload/dialogUpload; ``` dialog { visible:false,// 是否显示弹框 size:20,///文件大小 dialogWidt:'500px',//弹框大小 acceptlist:'', loading:false,//是否显示冻结，操作的时候 均要设置 multiple:true// 多文件 还是单文件 } tempParams：{} ,//模板导出所需要的参数，按照每个页面要求设定 @uploadSummit 点提交后回传 ``` # Button 组件 components/Control/Button.vue; ``` type 类型 primary .....和 elementPlus 同步 ，只是会显示不同的主题 size: 按钮规格 .....和 elementPlus 同步 icon: 按钮图标 tooptip: icon按钮显示的文字描述 label:按钮文字 isButtonShow:是否显示 loading: 冻结层 color:图标和文字的颜色 @actionClick 按钮操作回传 ``` # amapDraw.vue 地图绘制多边形 ``` Points://初始坐标点 json串 '[[],[]]'格式 CenterPoints://中心点 字符串 @reviewPath 回调函数 返回 JSON字符串 ``` # setAMapMarker 地图选点工具 ``` centerPoints://中心点、选择的点 字符串 @reviewPath 回调函数 返回 字符串 ```