啤啤熊

发表于2024-03-28|更新于2024-06-04|小程序|Uniapp

引用站外地址 vant ui weapp文档地址 https://vant-contrib.gitee.io/vant-weapp/#/home hbuilderx新建项目引入vantui安装 vant1npm i @vant/weapp -S --production 新建 wxcomponents 文件夹注意，在根目录中新建 wxcomponents 文件夹! 引入vant组件在node_modules/@vant/dist 移动到 wxcomponents/dist/文件夹中修改App.vue文件引入vant样式文件1234567891011121314151617181920<script> export default { onLaunch: function() { console.log('App Launch ...

vue中transition过渡抖动问题

发表于2024-03-14|更新于2024-06-04|FrontEnd|Vue

为了让项目在页面切换时不那么死板，我是用了transition组件并加入淡出淡出效果，然而切换页面我发现居然每次跳一下。其实就是上个路由的占位导致，百度后说隐藏消失的页面让其不占位。解决方案 fade-leave-to路由添加display:none; 注意: fade-leave-to 是v-leave-to的别名，即是name="fade",可填写自己所命名; 12345678910111213.app-main-enter-active,.app-main-leave-active { transition: opacity 0.5s ease;}.app-main-enter-from,.app-main-leave-to { opacity: 0;}// 处理 transition 抖动问题上一个页面离开时占位引起!.app-main-leave-to{ display: none;} vue3 中如果出现以下问题可以通过 @leave 回调函数来终止动画执行!da ...

vue3后台项目结构搭建

发表于2024-03-12|更新于2024-06-04|FrontEnd|vue3项目

环境准备 node: v16.20.2 npm: 8.19.4 依赖项dependencies 依赖项版本描述 vue 3.4.15 vue框架 vue-router 4.2.5 页面路由管理 axios 1.6.7 http请求库 echarts 5.5.0 echarts图表 pinia 2.1.7 状态管理 element-plus 2.6.0 ui组件 chinese-lunar 0.1.4 阳历转农历 chinese-workday 1.10.0 根据日期获取节假日 @vueuse/core 10.9.0 工具类 devDependencies 依赖项版本描述 @element-plus/icons-vue 2.3.1 element-plus 内置图标 icons @vitejs/plugin-vue 5.0.3 Vite 项目配置 Vue 相关的特殊行为，比如向 Vue 编译器传递相关选项，请查看 pinia-plugin-persistedstate 3.2.1 状态处理持久化插件 ...

webpack5

发表于2024-03-09|更新于2024-06-04|FrontEnd|Webpack

引用站外地址尚硅谷 Web 前端之 Webpack5 教程 https://yk2012.github.io/sgg_webpack5/ 前言webpack是打包工具，平时开发时我们使用的框架(vue react) 以及样式处理器(scss less)等技术在浏览器端是无法被识别的这时候的需要webpack打包成(js css)后才能被浏览器识别而webpack5是webpack的最新版本它支持ES6语法并且支持tree shaking优化打包体积! webpack是静态资源打包工具!它会以一个文件或多个文件作为入口，将我们整个项目所有编译合成一个或多个文件!输出好的文件就是编译好的文件，可以直接在浏览器中运行!webpack输出的文件为bundle文件! 主流的打包工具: Grunt Gulp Parcel Webpack Rollup Vite webpack本身功能是 ...

发表于2024-02-24|更新于2024-06-04|FrontEnd|Vue

vue3与vue2 性能的提升打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 源码的升级使用Proxy代替defineProperty实现响应式重写DOM的实现和Tree-Shaking 支持typescript 新的特性 Composition API (组合式api) setup ref与reactive computed与watch 新的内置组件 Teleport Suspense Fragment 其他改变新的生命周期钩子:setup beforeCreate created onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounteddata选项应始终被声明为一个函数创建vue3工程vue-cli查看 vue-cli版本号, 确保@vue/cli版本在4.5.0以上 1vue --version 安装或升级你的vue-cli 123456789# 安装npm install -g @vue/cli# 升级npm ...

发表于2024-02-24|更新于2024-06-04|FrontEnd|Vue

defineProterty Object.defineProperty JS中的一个方法，常用来定义属性的，在Vue.2x中的数据代理，是通过此方法来实现的! 参数 name desc targetObj 目标对象 add property 添加的属性 options 配置项 options 配置项 key valType defaultVal desc value any type ‘18’ or 18 or ‘年龄’ 为目标对象定义的属性值 enumerable Boolean false 控制属性是否可枚举,默认不能 writable Boolean false 控制属性是否可修改,默认不可被修改 configurable Boolean false 控制属性是否能被删除,默认不能 setter Function callback(val) 设置新的属性值 getter Function - 获取属性值使用12345678910111213141516171819202122let num ...

css基础知识回顾

发表于2023-12-16|更新于2024-02-25|FrontEnd|CSS

样式定义行内样式行内样式就是写在html 标签内的样式,又称(内联样式)。语法! 1<h1 style="color: red;">行内样式</h1> 内部样式内部样式就是写在html被head标签内所包裹中的样式,又称(内部样式)。语法! 123456789<head> <meta charset="UTF-8"/> <title><</title> <style> h1 { color: red; } </style></head> 外部样式外部样式就是在外部文件中所定义的样式,并通过link标签在当前页面中引入后放在head标签内使用,又称(外部样式)。语法! 这里是style.css文件! 123h1{ color: red;} 这里是在html文件中通过link标签引入外部样式! 12345 ...

渡一知识点

发表于2023-12-05|更新于2024-06-04|FrontEnd|渡一

Javascriptdrag 拖拽事件在可拖动的目标上触发的事件事件属性事件描述 drag 当用户在元素上拖动时触发 dragstart 当用户开始拖动元素时触发 dragend 当用户拖动元素时结束时触发在放置目标上触发的事件事件属性事件描述 dragover 当拖动元素进入目标元素时触发 dragenter 当拖动元素进入目标元素时触发 dragleave 当拖动元素离开目标元素时触发 drop 当拖动元素放置在目标元素时触发简单示例htmlcssjavascript12345<div class="dropzone"> <div id="draggable" draggable="true">这个 div 可以拖动</div></div><div class="dropzone" id="droptarget"></div>1 ...

html基础知识回顾

发表于2023-11-16|更新于2024-02-25|FrontEnd|HTML

html 标记语言html语言是前端三剑客(html[页面骨架] css[骨架_样式] javascript[骨架_行为])其中一种标记语言!其html主要作用就是用来搭建整个页面的骨架! html文档结构1234567891011121314<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href=" ...

mars3d初识

发表于2023-10-31|更新于2024-06-04|Map|Mars3d

学习资源引用站外地址 mars3d教程文档 http://mars3d.cn/doc.html#map/layer 引用站外地址 mars3d API文档 http://mars3d.cn/api/Map.html 引用站外地址 mars3d功能示例 http://mars3d.cn/example.html?type=vue#/ex_10 工具链接引用站外地址 ...