uni-app制作新手引导
摘要：新手引导一般用于新用户打开APP，引导用户使用的流程 实现思路，以uni-app为例，也是基于vue实现 1. 获取需要高亮元素的宽高以及left, top 使用 boundingClientRect 方法 2. 使用box-shadow 将其它区域遮盖住即可 具体步骤： 一、封装我们需要的数据 d
阅读全文
posted @ 2021-06-10 22:59
随笔分类 - Vue
【项目升级】将vue-cli2.9升至4.5
摘要：一、为什么要升级 公司的项目都是采用vue-cli2.9构建的，随着业务的复杂和项目的庞大，很多优化项无法达到预期的要求。在尝试各种方法之后，最终决定升级到cli4.0版本。 4.0版本带来的变化有以下几点： 采用webpack 4.x构建，提升启动和打包效率； webpack 4.x 使用的 sp
阅读全文
posted @ 2021-03-11 14:10
Vue常用指令
摘要：Vue 自定义指令 在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.di
阅读全文
posted @ 2020-12-15 09:31
重磅来袭 Vue 3.0 One Piece 正式发布
摘要：代号为One Piece 的Vue3.0 在9月19日凌晨正式发布！！ 此次vue3.0 为用户提供了全新的 composition-api 以及更小的包大小，和更好的 TypeScript 支持。 发布地址 Vue-next Vue3.0 是当前非常流行的框架，Vue3.0更是酝酿了2年多的时间，
阅读全文
posted @ 2020-09-19 08:30
Vue 事件的高级使用方法
摘要：Vue 事件的高级使用方法 事件方法 在Vue中提供了4中事件监听方法，分别是： $on(event: string | Array, fn) $emit(event: string) $once(event: string, fn) $off(event?: string|Array, fn?)
阅读全文
posted @ 2020-09-11 14:33
vue-cli 2.x和3.x配置移动端适配px自动转为rem
摘要：移动端适配一直都是个大问题，现在也出现了各种各样的解决方案，比如 rem, vw 百分比等，但是比较成熟的切比较容易编写的还是 rem，他是相对于根元素的 font-size 进行等比例计算的。 但是我们在编写css的时候，需要计算每一个元素相对于根元素的rem值是多少。会比较麻烦，并且维护起来也不
阅读全文
posted @ 2020-07-20 18:07
el-upload配合vue-cropper实现上传图片前裁剪
摘要：需求背景 上传一个封面图，在上传之前需要对图片进行裁剪，上传裁剪之后的图片，类似微信的上传头像。 技术方案 上传肯定是用element的 el-upload 组件实现上传，非常方便，各种钩子函数。 裁剪一开始找的 cropper 看着功能到是非常齐全，api也比较丰富，基本是符合预期的需求的。但是此
阅读全文
posted @ 2020-06-06 00:00
Vuex原理实现
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 思考问题 Vuex 只在更实例引入了，那么它是如何在每个子组件中都能使用的？ Vuex 是一个插件，为什么更改了Vuex中的state，会触发
阅读全文
posted @ 2020-06-02 22:34
vue 中使用百度统计
摘要：百度统计一个免费的统计平台，使用的时候只需要申请下账号即可 官网地址：https://tongji.baidu.com/ 一、添加需要统计的网址 二、添加完之后，点击获取代码，可以看到一段js代码 三、每个网址都会对应一个唯一的id，这个不能更换，将此代码复制到 vue 的 index.html 中
阅读全文
posted @ 2020-05-21 14:32
移动端开发问题记录
摘要：记录本地项目开发过程中，遇到的问题。 本次项目开发，使用vue-cli 2.9 搭建，用于移动端新闻详情页开发。 1. 在IOS手机上，数字串会自动识别为 电话号码，并加上 <a> 标签 解决方法：在html中添加meta 标签 2. 在微信中会有缓存，更新了代码之后，在微信网页中打开，还是显示的旧
阅读全文
posted @ 2019-12-23 16:45
vue中使用videojs打包后体积过大优化
摘要：videojs 是一个非常好的js库，可以支持各种格式的视频播放，也能做直播流。官网地址 https://videojs.com/ 在vue项目中也可以使用 vue-video-player ，更好的与vue结合使用，封装成了相应的组件，git: https://github.com/surmon-
阅读全文
posted @ 2019-12-19 10:40
vue 纯前端导出 excel 表格
摘要：在开发后台管理系统的时候，很多地方都要用到导出excel 表格，比如将table中的数据导出到本地，那么实现这种需求往往有两种方案： 一、后端开发一个下载链接，前端将这个链接放到 a 标签的 href 中，一点就能下载。 优点：对于前端来说实现简单，不用写过多的代码，也不依赖第三方库，兼容性好 缺点
阅读全文
posted @ 2019-08-23 09:49
Vue 中渲染字符串形式的组件标签
摘要：在vue中如果要渲染字符串形式的标签，vue 提供了 v-html 指令，可以很方便的渲染出来。但是如果这个标签是一个组件，或者element-ui 的组件时，就不能解析出来了，因为v-html 只能解析原生的属性。 那么就要使用jsx渲染来解析 当然在开发过程中肯定不会像上面那么些，将采用以下方法
阅读全文
posted @ 2019-04-08 15:28
vue 中结合百度地图获取当前城市
摘要：首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script 在 webpack.base.conf.js 中写入一下代码 在我们需要使用的vue文件引入
阅读全文
posted @ 2019-03-28 11:05
vue-cli 项目实现路由懒加载
摘要：在vue 单页应用中，如果路由不实现懒加载，那么打包出来的文件将会非常大，加载也会非常慢。vue-router 官网也有相应的介绍，但是具体怎么去实现还是讲的比较模糊的，下面将一步步讲解配置路由懒加载。 先看一下依赖版本： webpack 3.6.x, vue 2.5.x, babel 6.x 使用
阅读全文
posted @ 2019-03-20 16:01
Vue.js 父子组件之间通信的方式
摘要：Vue 父子组件之间的同学有一下几种方式： 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用的比较多 5. privide 和 inject -- 高阶组件 下面将分别介绍 1、 props
阅读全文
posted @ 2019-02-14 17:11
Vue Affix组件
摘要：在vue的项目中经常用到固钉，但是 element-ui 上并没有提供这样的组件可供使用，ant-design-vue 有提供，总不能为了这一个组件再去引入一个组件库吧 下面是一个封装好的 affix 组件，可以放到项目中直接使用 Affix.vue 使用方法也是非常简单 test.vue API
阅读全文
posted @ 2018-12-11 10:36
js 判断是否可以打开本地软件
摘要：js判断时候可以打开本地的软件或者插件 点击一个按钮，打开本地的软件，比如问题反馈，需要调起本地的邮箱，填入一些信息。 这个功能<a>标签有提供支持，但是如果本地没有安装邮箱，则无法打开，点了之后也没有任何反应，那么就需要判断当前电脑或者手机是否已经安装了指定的软件，如果已经安装，则打开该软件，否则
阅读全文
posted @ 2018-10-17 14:20
Vue 移动端常用tap事件封装
摘要：基于Vue的移动端项目，有些时间原生并没用提供，需要我们自己手动封装，可以封装一些自定义指令来供全局使用。 本文封装了 tap, swipe, swipeleft, swiperight, swipedowm, swipedown, swipeup, longtap, 在项目中基本上也够用了 代码如
阅读全文
posted @ 2018-10-12 16:08
Vue 中使用 viewerjs
摘要：安装 viewerjs npm install viewerjs --save 创建一个 Viewer.vue 组件 支持的键盘事件 仅在modal mode 下可用 ESC 键：退出全屏、关闭、退出、停止播放 Space 键：停止、播放 ← 键：查看上一张图片 → 键：查看下一张图片 ↑ 键：放大
阅读全文
posted @ 2018-10-08 14:39
