一、是什么Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去而treeshak
转载
2024-05-03 12:32:33
203阅读
Vue3.0 Vue 3.0 已经在原型设计阶段了,而且我们已经实现了一个与 2.0 的特性近乎相等的运行时了。下文中列出的许多条目,要么已经实现了,要么已经确认可实现。那些还未实现或者仍在探索阶段的条目会用一个“*”标记性能提升一句话简介:更小巧,更快速;支持摇树优化;支持 Fragments 和跨组件渲染;支持自定义渲染器。更小巧:这份新的代码库在设计之初就考虑到了对“摇树优化 (t
目录前言数据准备叶子节点的点击事件默认展开/收缩节点展开/收缩适应视口销毁画布生成图代码 前言在第一节实现了, 根据准备好的数据生成树形图,根据数据数值改变节点以及节点文本颜色。 本节实现功能:1、叶子节点点击事件:点击叶子节点,弹出弹框展示叶子节点信息 2、加载时默认展开/收缩节点 3、展开/收缩节点后,画布适应视口 4、更新展示数据后,需要销毁画布以更新树图实现效果如下: 树图结构:效果一:
背景:最新项目中需要学习前端vue框架,进行一些页面的编写,在遇到多选框的时候研究了。 需要实现的样式 需要在上面选择品牌和版本的选择的时候动态变换机型。问题第一步是不理接里面的参数含义,大量时间去摸索。<template>
<div>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
前言这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来。 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 效果图这个最后做出来的效果图 实现功能Goods、Ratings、Seller 组件视图均可上下滚动商品页 点击左侧menu,右侧list对应跳转
后端返回了50万数据,让前端一次性展示成树,之前用的ant-design-vue的tree插件,卡的死死的,经过大量实验,现发现三种树可以支持如此大数量的数据。目录第一种:vue-easy-tree使用方式:1.安装插件2.引入插件全局引入组件引入3.使用 在使用虚拟滚动时,必须设置 node-key。4.api(githup经常打不开,哎,复制了一下大家一起看)基础用法可选择
添加@select=“rowSelect” @select-all=“selectAll”<el-table
:data="tableData"
ref="tableRef"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
转载
2024-03-25 13:45:13
1153阅读
2评论
关于懒加载众所周知,对于页面内容比较丰富的网站,dom的解析会很复杂,这样就会导致首屏加载过慢,对于图片很丰富的网站,我们知道可以使用图片懒加载来提高网站的响应速度,我在我的另外一篇文章中写过,有兴趣的点击这里。像淘宝、京东等等的首页都是经过懒加载处理的,他们会先渲染出骨架,然后懒加载的区域出现在了可视范围的时候再把骨架替换为真实的内容。骨架: 真实内容:这样就避免首页一次性加载过多的内容浏览器需
vue适用版本:npm i --save ant-design-vueAnt Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://1x.antdv.com/components/button-cn采用 React 封装的 Ant Design:npm insta
转载
2024-05-27 19:00:16
312阅读
跨域设置 http://www.ituring.com.cn/article/200275 打包 npm adduser 如果长时间不登录,可能会过期,使用 npm login 进行登录就可以 pu
原创
2021-07-23 11:32:15
391阅读
eslint用于代码检查,prettier用于代码格式化,具体操作如下1.安装以下eslint插件
安装以下eslint插件,并增加.eslintrc.js配置文件,.eslintignore配置忽略检查的文件(1)eslint
用于检查和标示出ECMAScript/JavaScript代码规范问题工具。
(2)@babel/eslint-parser
简而言之就是一个解析器,允许您使用ES
转载
2024-05-29 12:57:59
283阅读
main.js App.vue action.js getters.js index.js mutation.js types.js
转载
2017-06-24 05:50:00
220阅读
vue2
原创
2021-08-01 18:40:40
412阅读
最近项目开发中遇到需要用到ie浏览器的情况,因为是内网开发,大致记录下兼容过程。问题1:ie11浏览器页面无法加载首先遇到的问题是谷歌浏览器运行无问题,控制台也不报错,但是ie11浏览器就打不开,控制台报错----显示语法错误:,了解后发现ie浏览器不支持es6,可以通过core-js/stable及regenerator-runtime/runtime编译,vue cli官方推荐使用,main.
转载
2024-04-03 14:52:36
210阅读
文章目录项目安装webpack方式vite方式Treeshaking特性语法setupref用法一 响应式数据获取节点ts下的处理v-bind() 注入方式toRefstoRefisRefreactivehookssetup参数provide/inject父子组件的传值(同v2)computed计算属性watch 监听监听多个生命周期路由周期 onBeforeRouteUpdate路由路由的默认
目录一、项目基本配置二、Eslint语法规范型检查 一、项目基本配置修改项目信息 package.json 文件{
"name": "XXX",
......
"description": "XX系统",
"author": "tom<123456@qq.com>",
......
}修改端口号 config/index.js中修改port:
转载
2024-07-29 09:30:58
87阅读
0 前言从Vue2升级到Vue3,可能最大的变化之一就是Composition Api了。 Composition Api是什么东西为啥要用它?怎么用它?有什么需要注意的吗? 面对陌生的它,我们在这儿先简单认识一下它,而具体如何使用以及使用的注意点,将会在后续的文章更新中介绍,可以关注本文最后持续更新的扩展阅读部分。1 是什么Composition Api,也就是组合式Api。 我认为,它解决的主
转载
2023-11-06 12:52:14
247阅读
什么是JSX摘自 React 官方: 它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言,但它具有 JavaScript 的全部功能。Vue 什么时候应当使用JSX这里说的是应当,而不是必须。因为在绝大多数情况下,模板语法都能胜任,只不过写起来看着不太
转载
2024-06-03 15:34:33
66阅读
步骤一:集成standard标准的eslint进你的项目中首先准备一个没有加入eslint的vue项目 1.安装eslint的包 npm i eslint -D 2.初始化eslint,并生成eslint配置文件 npx eslint --init3.依次按照问题选择自己需要的配置 你想要的怎么使用eslint? 选择第三个:检查,发现问题,并且约束代码风格 你的项目使用的是什么模块? 选择第一个
转载
2024-06-12 14:16:51
274阅读
介绍在vue中使用antV-G2展示基础条形图G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。一、安装 antV-G2通过 npm 安装npm install @antv/g2 --save成功安装完