前端
zyf13671493506
这个作者很懒,什么都没留下…
展开
-
第一节 vue3 router内置类型有哪些
vue3 router内置类型有哪些原创 2023-09-06 16:04:01 · 454 阅读 · 0 评论 -
Vue3中如何使用ref获取元素节点全面解析
vue3 ref获取dom的使用原创 2022-09-28 15:36:52 · 5264 阅读 · 0 评论 -
vue2升vue3报错,warning Replace `xxx` with `“xxx“` prettier/prettier
vue2升vue3报错,warning Replace `xxx` with `“xxx“` prettier/prettier原创 2022-08-25 10:03:02 · 941 阅读 · 0 评论 -
Vue虚拟Dom用diff算法
什么是虚拟DOM?虚拟DOM(Virtual Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的。真实的元素节点:<div id="wrap"> <p class="title">Hello world!</p></div>VNode:{ tag:'div', attrs:{原创 2022-05-11 15:17:42 · 104 阅读 · 0 评论 -
回流和重绘
我们可以把页面理解为一个黑板,黑板上有一朵画好的小花。现在我们要把这朵从左边(left)移到了右边(right),那我们是不是要先确定好右边的具体位置,画好形状(回流),再画上它原有的颜色(重绘)。但如果我们仅仅是想换给花朵换一个颜色,那么只需擦掉花朵上的颜色,再重新涂上自己期望的颜色(重绘)就可以了。1、回流(Reflow)当Render Tree中部分或全部元素的尺寸,结构或者某些属性发生改变时,浏览器重新渲染部分或全部文档的过程导致回流发生的一些因素:浏览器窗口大小发生改变元素字体大小变化原创 2022-05-11 14:32:24 · 128 阅读 · 0 评论 -
nvm的使用与运用
查看使用的node版本nvm ls切换指定版本nvm use 17.4.9nvm卸载指定版本的nodenvm install 16.0.0为 nvm 设置 npm 镜像,就可以自动下载npm了1.先删除你没有npm的node版本nvm uninstall 16.0.02.设置npm镜像nvm npm_mirror https://npm.taobao.org/mirrors/npm/3.重新下载指定版本nvm install 16.0.0...原创 2022-04-19 22:34:57 · 257 阅读 · 0 评论 -
npx 执行报错
https://blog.csdn.net/hellobbw/article/details/108402959原创 2022-03-19 18:16:20 · 903 阅读 · 0 评论 -
Swiper去除点击选项卡时出现的蓝色边框和蓝色背景
/* 去除点击选项卡时出现的蓝色边框 */ .swiper-pagination .swiper-pagination-bullet:focus { outline: none; } /* 去除点击选项卡时出现的蓝色背景 */ .swiper-pagination-clickable .swiper-pagination-bullet { cursor: auto;}...原创 2021-11-08 12:46:38 · 643 阅读 · 0 评论 -
el-table中使用el-datePicker设置默认时间后,修改时间页面不回显问题
其实和之前设置tableData一样,设置了值,但是页面不刷新问题(链接),所以以后遇到这种值改变了,但是页面没改变的问题,加个key试试。<el-table-column label="有效日期" prop="begin_timestamp" width="360px"> <template v-slot="scope"> <el-date-picker class="special" :key="itemKey" v-model="scope.ro原创 2021-08-30 18:09:04 · 733 阅读 · 2 评论 -
将数组里某个属性相同的对象合并成一个数组
https://blog.csdn.net/C_TopTopTop/article/details/119356876var array=[{id:1,name:‘小明’,sex:‘男’},{id:2,name:‘小刚’,sex:‘男’},{id:3,name:‘小红’,sex:‘女’},{id:4,name:‘小花’,sex:‘女’},{id:5,name:‘小甜甜’,sex:‘女’},]var obj={},newArr=[];array.forEach(function(item,s原创 2021-08-23 18:24:20 · 172 阅读 · 0 评论 -
element 合并列
https://blog.csdn.net/qq_41442428/article/details/115182979<template> <div class="GlobalSituation"> <el-table class="control-table master-table" :data="tableList.tableData" style="width: 100%;" border :span-method="spanMethod" :row-cl原创 2021-07-29 18:10:15 · 348 阅读 · 0 评论 -
手动自己分支的代码合并到dev
git add *git commit -m "init kezengli "git push origin kezengligit checkout devgit pullgit merge kezengligit push原创 2021-07-19 10:58:34 · 445 阅读 · 1 评论 -
cdn引入vue-router
https://www.cnblogs.com/h5it/p/14015604.html原创 2021-07-12 14:13:18 · 898 阅读 · 1 评论 -
vue cli4 WEBPACK-BUNDLE-ANALYZER 分析包,来查找需要优化的文件
https://www.freesion.com/article/81551372354/1、简介及安装在终端或 DOS 命令窗口中输入以下的命令行先安装 webpack-bundle-analyzernpm install webpack-bundle-analyzer -D2、修改 VUE.CONFIG.JS和 PACKAGE.JSON① 修改 vue.config.js文件,代码如下:module.exports = { chainWebpack: config => {原创 2021-07-09 15:05:43 · 164 阅读 · 0 评论 -
element 元素不挂再body 上的设置
:popper-append-to-body="false"原创 2021-06-19 11:41:17 · 794 阅读 · 0 评论 -
git远程新建分支之后,本地无法及时更新
git remote update origin --prune注意 是双-原创 2021-06-13 23:57:46 · 862 阅读 · 0 评论 -
可以滚动,但是不等出现滚动条
https://www.cnblogs.com/yanqiong/p/12196484.html.g-panel { height: calc(100% - 112px); overflow: auto; &::-webkit-scrollbar { display: none; // 重点 }}原创 2021-05-12 12:20:26 · 64 阅读 · 0 评论 -
sass
https://blog.csdn.net/weixin_45264991/article/details/103805074?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_v2~rank_aggregation-1-103805074.pc_agg_rank_aggregation&utm_term=scss%E5%AE%89%E8%A3%85%E4%BD%BF%E7%9原创 2021-05-11 12:35:23 · 58 阅读 · 0 评论 -
vue 报错 C:\Program Files\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git
https://blog.csdn.net/weixin_44931166/article/details/114669628原创 2021-04-28 11:01:24 · 8531 阅读 · 0 评论 -
Vue.config.js 增加( js. css)版本号 ,修改文件名称
https://www.it610.com/article/1297088381938900992.htm场景: 增加 js, css 版本号 , 避免缓存方案: Vue Cli3 的Vue.config.js 中的 configureWebpack 进行配置:output 配置jsplugins 配置css下方js路径 决定了 在dist 中文件路径process.env.VUE_APP_VERSION = require(’./package.json’).versionconfigur原创 2021-01-07 17:41:11 · 1863 阅读 · 1 评论 -
vue3 的学习笔记
环境配置和创建vue3项目1.node版本要10以上2.npm install -g @vue/cli3.vue --version 查看版本号4.5.0以上4.vue create vue3bases5.第三项6.第一个(choose Vue version),第二个(Babel),第三个(TypeScript),倒数第三个(Unit Testing)7.n,,,,,n 全是默认+n1.在vscode中安装eslint如果eslint不生效,在项目的更目录新建一个.vscode的文.原创 2020-11-20 17:00:55 · 320 阅读 · 0 评论 -
react 初级的学习笔记
1.动态开发语言 java python2.静态开发语言 c++,c#,typeScripttypeScript 的优势优点:效率高,丰富的接口提示,更少的错误,编译期间就能发现大部分错误缺点:增加学习成本,短期内增加了一些开发成本数据类型:7种原始类型Boolean,Null,Undefined,Number,BigInt,String,Symbol 和 ObjectReact 是什么 ???1.声明式的写法2.组件化3.一次学习,随处编写进入React的世界官方脚手..原创 2020-11-20 17:00:22 · 237 阅读 · 0 评论 -
react 优雅引入css
https://www.jianshu.com/p/3d877deb7728原创 2020-11-14 09:28:29 · 72 阅读 · 0 评论 -
vuex 多个模块应用
index.jsimport Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => { // set...原创 2020-11-06 17:52:52 · 680 阅读 · 0 评论 -
vuex 进阶教程
index.js代码import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)const state = { language: getLanguage(),}const mutations = { SET_LANGUAGE: (state, language) => { state.language = language .原创 2020-11-06 17:34:45 · 69 阅读 · 0 评论 -
vuex中namespaced的作用以及使用方式
vuex中的store分模块管理,需要在store的index.js中引入各个模块,为了解决不同模块命名冲突的问题,将不同模块的namespaced:true,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名1、声明分模块的store时加上namespaced:true// initial stateconst state = { userId:'',//用户id userName:'',//用户名称 token:'',//token原创 2020-11-06 16:40:23 · 555 阅读 · 0 评论 -
axios main
https://www.wenyuanblog.com/blogs/vue-axios-interceptors-packaging.htmlaxios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库。 axios很好用,其中之一就是它的拦截器十分强大,我们可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态、原创 2020-11-03 14:12:06 · 139 阅读 · 0 评论 -
vue 定义全局方法,三种方法
方法一:使用Vue.prototype//在mian.js中写入函数Vue.prototype.getToken = function (){ ...}//在所有组件里可调用函数this.getToken();方法二:使用exports.install+Vue.prototype// 写好自己需要的fun.js文件exports.install = function (Vue, options) { Vue.prototype.getToken = funct原创 2020-11-02 17:37:16 · 16528 阅读 · 0 评论 -
手动配置 webpack
https://www.cnblogs.com/skylineStar/p/10282347.htmlhttps://www.jianshu.com/p/e4716e5bc8bbhttps://www.cnblogs.com/AFu-1993/p/13527690.htmlhttps://www.cnblogs.com/joyco773/p/9049623.html //重要https://www.cnblogs.com/zhubei/p/6479454.htmlhttps://blo.原创 2020-10-31 11:34:08 · 87 阅读 · 0 评论 -
vue 富文本编辑器插件官网文档
https://www.kancloud.cn/wangfupeng/wangeditor3/460259原创 2020-10-30 17:16:13 · 1507 阅读 · 0 评论 -
taro vue 请求封装
import Taro from '@tarojs/taro'import store from '../store/index'// 1.错误提示// 2.接口请求的加载中// 3.数据请求成功 success===0000// 4.错误信息的解析 状态码export async function request (params) { const {url,data,method,header,isLoading=true,isShowError=true,timeout=60000.原创 2020-10-30 16:06:36 · 762 阅读 · 0 评论 -
自定义环境变量 和 axios 封装 全局变量的定义和引用
定义环境变量的官网地址:https://cli.vuejs.org/zh/guide/mode-and-env.html定义环境变量:https://blog.csdn.net/Amy_cloud/article/details/92638555定义环境变量:https://blog.csdn.net/zhangyun1107892254/article/details/93203381?utm_medium=distribute.pc_relevant.none-task-blog-BlogCom原创 2020-10-30 12:00:41 · 1071 阅读 · 0 评论 -
解决IOS的h5唤起键盘时,导致页面元素错位的问题
在input绑定blur事件: blur(event) { let result; if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS result = 'ios'; } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android .原创 2020-10-30 10:29:11 · 616 阅读 · 1 评论 -
vue 跨域配置实例
vue-cli3配置与跨域处理转载:https://segmentfault.com/a/1190000020102366官方地址:https://cli.vuejs.org/zh/config/#vue-config-js跨域处理前后端分离开发时,不得不面对跨域问题。对于跨域,可以用两种办法进行处理。1.安装nginx,将后端和前端都代理带nginx上。2.在vue-cli中配置proxy,将API请求代理到API服务器上。设置devServer.proxy..原创 2020-10-29 11:41:47 · 834 阅读 · 0 评论 -
二次封装axios,拦截器
作为前端开发者,每个项目基本都需要和后台交互,目前比较流行的ajax库就是axios了,当然也有同学选择request插件,这个萝卜白菜,各有所爱了。目前虽然axios有config、interceptor和各个请求方式,但是针对一个大型的项目,我们还是需要做二次封装才能快速提升开发效率!今天我们针对axios库做二次封装,看看是否有简化我们的开发工作。封装interceptorinterceptor作用就是拦截,可以针对请求参数和响应结果进行拦截处理,一般在项目当中,我们主要会针对接口常规报错原创 2020-10-29 10:51:55 · 448 阅读 · 0 评论 -
vue 拦截器 axios结构
axios 封装的结构import axios from 'axios'export function request(config){ //使用自定义配置创建axios实例 const instance = axios.create({ //urlbase:'http://123.207.32.32:8000' baseURL:'http://152.136.185.210:8000/api/z8', timeout:5000原创 2020-10-29 10:05:17 · 87 阅读 · 0 评论 -
自定义filter
原创 2020-10-29 09:22:06 · 59 阅读 · 0 评论 -
token 过期实例
这几天项目提测,测试给我提了个bug,说token过期,路由应该自动跳转到登陆页面,让用户重新登录。先说下一些前置条件,1:我公司的token时效在生产环境设置为一个小时,当token过期,所有接口都直接返回2:每次路由跳转都会对token进行判断,设置了一个全局的beforeEach钩子函数,如果token存在就跳到你所需要的页面,否则就直接跳转到登录页面,让用户登录重新存取token接口返回的信息{ code:10009, msg:'token过期', data:null}全局的路原创 2020-10-29 08:57:36 · 1008 阅读 · 0 评论 -
路由导航栏守卫第二种实现方式
router.beforeEach((to, from, next) => { // 获取token const tokenStr = localStorage.getItem('token') if (to.path === '/' && tokenStr ) { next('/index') }else{ next() } if (!tokenStr) { return next('/') ...原创 2020-10-26 16:07:20 · 92 阅读 · 0 评论 -
bus 实践
1.2.3.原创 2020-10-26 15:53:35 · 197 阅读 · 0 评论