![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
放飞@wlg
这个作者很懒,什么都没留下…
展开
-
基于elementUI实现图片上传拖拽排序组件
说明:这里有个关于v-model的问题。如果draggable使用v-model,在fileList的值是父视图传过来的,那么是无法更改父组件的值。elementUI 上传文件组件不支持多张图片同时上传实现排序。会产生的问题:1、时间戳有时候会相同。2、顺向排序勉强实现,但想替换中间一张图片就有困难。同时上传图片的时候,在图片名称加上时间戳,上传成功之后,在根据时间戳排序。效果和elementUI的样式是一致的。方案2:拖拽排序,自行拖拽排序,灵活性比较高,没有啥限制。部分核心代码,方法自行实现。原创 2023-11-23 17:23:26 · 266 阅读 · 0 评论 -
echarts 甘特图组件
由于业务的需要,在echarts基础上,二次封装了甘特图组件来满足业务的需要。原创 2023-07-17 14:50:34 · 441 阅读 · 0 评论 -
浅谈前端工程化
一切能提升前端开发效率、提高前端应用质量的手段和工具都是前端工程化。原创 2023-02-27 10:45:03 · 145 阅读 · 0 评论 -
多项目打包框架
一个工程里面有多个单独的小项目,公共资源共用,每个项目配置单独的入口,使用webpack打包单个项目。需求方有很多小项目,都是单个页面,如果每个工程单独开设一个工程,资源有点浪费,也不利于开发人员代码统一管理维护。3、给每一个项目配置main.js路口文件,配置路由文件,以及App.vue文件。如果配置中有preload 的配置,那么需要修改相关的配置,不然会运行报错。2、在项目src目录下新建projects目录,用来放项目文件。4、配置打包文件vue.config.js。目的是单独打包每一个小项目。原创 2023-02-07 14:30:30 · 207 阅读 · 0 评论 -
音视频-mrtc
音视频通话MRTC集成原创 2022-11-30 20:55:34 · 450 阅读 · 0 评论 -
nginx 配置域名映射到本地IP
解决模拟正式域名映射到本地IP开发环境,进行测试。方案一:host方案二:nginx方案三:whistle原创 2022-08-04 11:07:11 · 9141 阅读 · 0 评论 -
vue项目改造SSR(服务端渲染)
1、SSR(服务端渲染)是什么?传统的vue项目浏览器渲染模式缺点:1、SEO问题2、首屏速度问题3、消耗性能的问题ssr服务器渲染模式优点:1、更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面2、首屏渲染速度快SSR 简单来说就是将页面在服务端渲染完成后在客户端直接展示。2、SSR原理简单示例index.template.html<!DOCTYPE html><html lang="en"><head> <原创 2021-07-07 16:00:35 · 2703 阅读 · 3 评论 -
vue项目 npm 同时执行多个命令
问题:vue项目启动需要同时启动mock 和 dev 服务?尝试解决方案1、npm run dev && npm run mock这样会阻塞npm run serve 运行,因为第一个服务没有抛出执行完成的命令(终止服务),所以无法执行第二个2、如果是node服务可以使用pm2 &&pm2 start mack.js && pm2 start mack1.js3、使用node.jsnode node.js 执行使用原生的接口const ch原创 2021-06-26 14:05:20 · 1438 阅读 · 0 评论 -
storybook vue@3.0
Storybook是一个开源工具,用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建UI组件。这里介绍vue@3.01、初始化项目npx sb@next init 2、直接运行npm run storybook运行结果3、配置scss需要安装sass-loader和node-sass,这里是自己写的FFButton,icon用的是elementUI的 所以样式需要配置scssnpm install sass-loader@8.0.2 node-sass@原创 2021-04-15 15:07:44 · 877 阅读 · 0 评论 -
node 构建脚手架
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-04-02 11:34:35 · 482 阅读 · 1 评论 -
没有用vue-cli创建的项目引入单元测试(jest+vue/test-utils)
用vue-cli创建的项目可以选择集成单元测试,这样就会自动构建好test文件那没有用vue-cli创建的项目该如何引入单元测试(jest+vue/test-utils)npm install 安装包注意安装版本“@vue/test-utils”: “^1.1.3”,“babel-helper-vue-jsx-merge-props”: “^2.0.3”,“babel-jest”: “^21.0.2”,“babel-plugin-dynamic-import-node”: “^1.2.0”,原创 2021-04-02 11:06:07 · 351 阅读 · 0 评论 -
axios api请求管理
很多人子啊请求接口的时候都在不断的写axios.get();axios.post();axios.put();axios.delete();每加一个接口都要写一次请求配置现在我来教大家自动管理请求的api就是我们可以根据url来生成对应的api调用的接口无需重复写相同的 代码server.js 配置axios 和拦截import axios from "axios";const service = axios.create({ baseURL: baseURL, hea原创 2021-03-19 16:57:19 · 98 阅读 · 0 评论 -
基于elementUI自定义表格
这个表格写了很久了,最近才整理。自定义表格可以根据数据自动生成表头,多级表头,列约定的数据格式如下:/** 数据格式 * headList:[ { prop:"date", label:"日期", width:"150", url:'', path:'', yl:'', children:[] }, { prop:"", label:"地址", width:"",原创 2021-03-13 10:59:59 · 2155 阅读 · 0 评论 -
el-dialog 自定义指令el-drag-dialog
el-dialog 自定义指令el-drag-dialog 的使用可放大,还原,拖拽。直接上代码dialog.jsexport default { bind(el, binding, vnode, oldVnode) { if (!binding.value) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el原创 2021-03-13 10:42:53 · 2680 阅读 · 0 评论 -
vue 过滤器的使用
创建filters.js 文件/** * 10000 => "10,000" * @param {number} num */export function toThousandFilter(num) { return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))}/** * Upper case first char * @param {Str原创 2021-03-13 10:24:52 · 95 阅读 · 0 评论