![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue的学习与积累
Echo-潔
一分耕耘一分收获
吾日三省吾身
自渡、自愈、自赎
展开
-
vue webpack打包配置生成的源映射文件不包含源代码内容、加密混淆压缩
通过配置文件,我们可以使用Vue CLI轻松实现对Vue应用程序代码的压缩、加密和混淆。通过压缩代码,我们可以减小文件的大小,提高加载速度。通过加密和混淆代码,我们可以增强应用程序的安全性,防止源代码被轻易泄露。代码压缩、加密和混淆是优化 Vue 应用程序性能和提高安全性的关键步骤。它们可以帮助我们提供更好的用户体验,并保护应用程序的知识产权。lintOnSave: false, // eslint-loader 是否在保存的时候检查。原创 2024-04-15 20:27:45 · 1326 阅读 · 0 评论 -
vue2.x 源码分析双向数据绑定的原理
vue源码解析数据双向绑定原理,Object.defineProperty 、Dep、Watcher原创 2022-06-07 17:29:43 · 194 阅读 · 0 评论 -
vue slot插槽详解
插槽就是子组件中提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。插槽的目的在于使组件更具有扩展性,如何封装一个好的组件?就是将共性抽取到组件中,将不同暴露为插槽。一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。一、插槽内容二、具名插槽三、作用域插槽四、废弃的具名插槽...原创 2022-03-04 17:22:36 · 664 阅读 · 0 评论 -
细说vue钩子函数(生命周期函数)
一、概述钩子函数用来描述一个组件从引入到退出的全过程中的某个过程,整个过程称为生命周期。钩子函数按照组件生命周期的过程分为:挂载阶段=>更新阶段=>销毁阶段。二、每个阶段对应的钩子函数挂载阶段:beforeCreate、created、beforeMounted、mounted更新阶段:beforeUpdate、updated销毁阶段:beforeDestroy、destroyed三、各个钩子函数的使用特点beforeCreate: 这个阶段主要是完成vue中关于生成周原创 2021-10-28 11:16:23 · 2635 阅读 · 0 评论 -
vue 使用高德地图
1、修改webpac.base.conf.js文件添加:externals: { 'AMap': 'AMap'}2、在index.html引入sdk引入有两种方式:(1)页面直接引入(一般用这个)<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> (2)异步加载<script src="http://w原创 2021-07-15 10:40:07 · 501 阅读 · 0 评论 -
vue 重复触发了同一个路由报错解决
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 避免到当前位置的冗余导航,简单来说就是重复触发了同一个路由。const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err =>原创 2021-06-25 17:55:57 · 231 阅读 · 0 评论 -
解决vuex数据在页面刷新被重置的问题
vuex数据是保存在 内存中的,页面每次刷新都会导致vuex里的数据被重置,目前的方案是在页面刷新前把数据存到sessionStorage在App.vue内操作export default { name: 'App', data() { return { } }, created() { //解决vuex数据在页面刷新被重置的问题 //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.get原创 2021-06-25 17:52:54 · 915 阅读 · 0 评论 -
vue的图片路径,webpack打包后错误解决
最近在项目出现一个这样的问题:在HTML 中把 img 标签的 src 属性 用相对路径后 ,然后使用webpack打包项目部署到线上的时候,图片路径会报错。因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个图片路径出错的问题,查了很久才解决。1、找到 config->index.js里面,如下修改2、找到 build->utils.js,在里面加入一句publicPath:’…/…/’,3、img标签引入图片<img src="static/images/list_ic原创 2021-06-25 17:45:54 · 481 阅读 · 0 评论 -
vue刷新当前页面,且页面不闪烁
一、场景:在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。需要切换中英文的网站,大体概念就是页面数据发生改变需要重新获取数据或刷新当前页时二、刷新当前页的方法:使用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,用户体验不好provide / inject 组合三、provide / inject 组合介绍...原创 2021-06-25 17:18:17 · 2120 阅读 · 0 评论 -
在vue里使用Lottie动画(实现 json 格式的动画)
一、Lottie简介与作用Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web、ios、android和react native。在前端使用,lottie-web库可以解析导出的动画json文件,并将其以svg、canvas或者html的方式将动画绘制到页面中。特点:Lottie实现原理是由设计师出动画,导出为json,给前端展示。动画由设计使用制作工具Adobe After Effects来实现,然后前端不仅可以节约开发成本,而且可以高度还原设计原创 2021-04-15 11:17:11 · 5540 阅读 · 1 评论 -
vue 使用 moment.js (JavaScript 日期处理类库) 全局filter过滤日期
安装momentnpm install moment -S在需要使用的文件内引入moment(如下例:1、 在src目录下新建filters文件夹,然后在filters文件夹下新建一个index.js,在index.js内导入moment(moment.js详情可见中文官网:http://momentjs.cn/)// filters/index.jsimport Moment from 'moment' let datetimeFormater = function(value,form原创 2021-04-01 17:26:36 · 690 阅读 · 0 评论 -
vue-cli脚手架移动端适配rem
1、下载两个依赖npm install lib-flexible --Snpm install px2rem-loader -S2、在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3、配置px2rem-loader在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:const px2remLoader = { loader: 'px2rem-loader', opti原创 2021-03-23 16:57:21 · 199 阅读 · 0 评论 -
使用命令行删除 node_modules
1、先全局安装删除工具npm install rimraf -g2、使用删除命令rimraf node_modules原创 2021-03-11 12:09:16 · 911 阅读 · 0 评论