![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 63
致良知丶
这个作者很懒,什么都没留下…
展开
-
vue-router 鉴权 守卫
vue项目前端鉴权方式常用的有以下三种:1、渲染菜单时控制模块按钮的显示隐藏(不足:直接输入链接仍然可以访问模块)2、在路由导航守卫中拦截,针对没有权限的模块进行重定向(不足:每次访问模块都需要鉴定权限,模块数量过多时会影响系统性能)3、借助vue-router 2.x版本新加的API addRouters动态添加路由信息(不足:首次加载需要解析和添加,多跳转一次路由)综上所述,权衡之后选择了addRoutes动态添加,首屏加载时间可能会多出0.5s左右,加载一次之后后续就不需要再进行处理,可以提升原创 2021-06-04 11:53:51 · 314 阅读 · 0 评论 -
webpack打包性能优化之路
路由懒加载(1)vue-router文件中的router使用懒加载方式。如下图所示(2)在vue文件中,也采用类似方式引入其他vue组件const showImage = () => import('@/components/common/showImage');启用gzip压缩和关闭sourcemap所有现代浏览器都支持 gzip 压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip 压缩可大幅缩减所传输的响应的大小(最多可缩减90%),从而显著缩短下载相应资源所需的时间、转载 2021-06-04 11:44:06 · 221 阅读 · 0 评论 -
Vant-UI 按需引入
第1步,下包// 通过 npm 安装npm install vant -S// -S: --save-dev 生产环境的依赖 (dependencies)// -D: --dev 开发环境的依赖 (devDependencies)第2步,下需要的插件// babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D第3步,配置在src目录下配置 .b原创 2021-06-03 20:02:41 · 218 阅读 · 1 评论 -
axios拦截,api统一管理
在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中。当项目越来越大的时候,接口的请求也会越来越多,怎么去管理这些接口?多人合作怎么处理?只有合理的规划,才能方便往后的维护以及修改。安装安装axios依赖包cnpm install axios --save引入一般会我会在项目src中新建一个untils目录,其中base用于管理接口域名,http处理请求拦截和响应拦截,user.js负责接口文件(接口文件可原创 2021-06-03 19:34:18 · 93 阅读 · 1 评论 -
vue多环境变量配置
vue-cli4环境变量配置和代理跨域配置环境变量配置跨域代理配置总结参考内容环境变量配置官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式在项目根目录中新建.env, .env.production, .env.pre 等文件NODE_ENV 和 BASE_URL 是两个特殊变量,在代码中始终可用一个环境文件只包含环境变量的“键=值”对: .env # 在所有的环境中被载入 .en原创 2021-06-02 20:52:51 · 724 阅读 · 0 评论 -
项目开发流程
1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn,npm(cnpm) 包管理工具 yarn add axios -S cnpm install axios -S-S: --save-dev 生产环境的依赖 (dependencies)-D: --dev 开发环境的依赖 (devDependencies)2.1 从0搭建,指令vue creat原创 2021-06-02 20:44:24 · 84 阅读 · 0 评论 -
Vue keep-alive实践总结
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。在2.1.0版本Vue中常见用法:// 组件exp原创 2021-06-01 18:51:54 · 96 阅读 · 0 评论 -
vue-router
路由简介路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。 — 维基百科前端路由的核心改变URL,但是页面不进行整体的刷新。vue-Router两种模式hash模式:浏览器url中#后面的内容,包含#。hash是URL中的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会加载相应位置的内容,不会重新加载页面。history模式 :HTML5,History interface提供了两个新的方法: pushState(),浏览器不会向服务端请求原创 2021-05-23 20:41:28 · 55 阅读 · 0 评论 -
深拷贝与浅拷贝
在学习深拷贝之前,我们要先搞明白什么是深拷贝?在JS中,数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存中,而对于引用类型来说,它在栈内存中仅仅存储了一个引用,而真正的数据存储在堆内存中一、 浅拷贝对于浅拷贝而言,就是只拷贝对象的引用,而不深层次的拷贝对象的值,多个对象指向堆内存中的同一对象,任何一个修改都会使得所有对象的值修改,因为它们公用一条数据二、深拷贝我们在实际的项目中,肯定不能让每个对象的值都指向同一个堆内存,这样的话不便于我们做操作,所原创 2021-05-23 20:30:35 · 74 阅读 · 0 评论 -
浅谈 Vuex中的一些功能
Vuex 是什么?概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这是官网给出的回答????这是我对vuex的简单的了解????vuex 是一个状态集中管理工具,主要解决大中型复杂项目的数据共享问题。 Vuex背后的基本思想,就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图。...原创 2021-05-23 19:27:58 · 104 阅读 · 0 评论 -
Vue 的 生命周期
Vue的生命周期beforeCreate(创建前):在此生命周期函数执行的时候,data和methods中的数据都还没有初始化。created(创建后):在此生命周期函数中,data和methods都已经被初始化好了,如果要调用 methods中的方法,或者操作data中的数据,最早只能在created中操作。beforeMount(载入前):在此生命周期函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时页面还是旧的。mounted(载入后):此时页面和内存中都是最新的数据原创 2021-05-21 08:02:00 · 87 阅读 · 0 评论 -
组件通信的几种方式
vue中有多种组件,父组件、子组件、兄弟组件等,这些组件之间的传值方式也是不同得1. 父传子这种传值方式比较简单,子组件只需用props将父组件传递过来的数据接收,即可使用//父组件代码:<p>这是父组件</p><input type="text" v-model="parentData"><Childrenfrt :parentData="parentData" ></Childrenfrt>//子组件代码:props: {原创 2021-05-20 08:02:17 · 526 阅读 · 0 评论