![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
文章平均质量分 61
小满zs
我是真菜
展开
-
Vue3(开发h5适配)
在开发移动端的时候需要适配各种机型,有大的,有小的,我们需要一套代码,在不同的分辨率适应各种机型。因此我们需要设置meta标签移动设备具有各种不同的屏幕尺寸和分辨率,例如智能手机和平板电脑。为了提供更好的用户体验,网页需要根据设备的屏幕宽度进行自适应布局。如果不设置,移动设备会按照默认的视口宽度(通常是较宽的桌面屏幕)来渲染网页,导致网页内容在移动设备上显示不正常,可能出现内容被截断或需要水平滚动的情况然后我们实现一个经典的圣杯布局。原创 2023-08-27 18:45:49 · 7304 阅读 · 5 评论 -
Vue3 Vite electron 开发桌面程序
Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium。原创 2023-07-13 23:42:03 · 33877 阅读 · 33 评论 -
Vue3.3 编译宏
Vue 3.3新增了一些语法糖和宏,包括泛型组件、defineSlots、defineEmits、defineOptions。原创 2023-07-09 02:18:48 · 2611 阅读 · 1 评论 -
Vue3 如何去开发安卓 或者 ios
由于不同平台的设计规范和用户习惯不同,使用 Uniapp 开发的应用在不同平台上的用户体验可能存在差异。开发者需要针对每个平台进行特定的适配和调优,以提供更好的用户体验。Uniapp 尽可能提供了跨平台的组件和 API,但某些特定平台的功能和接口可能无法完全支持。在需要使用特定平台功能的情况下,可能需要使用原生开发或自定义插件来解决。有些平台特有的功能或界面设计可能无法完全实现,需要使用特定平台的原生开发方式来解决。在遇到问题时,可能难以找到完善的解决方案,开发者可能需要花费更多的时间和精力来解决问题。原创 2023-07-03 00:27:57 · 4113 阅读 · 7 评论 -
小满Vue3第四十六章(Proxy跨域)
主要是出于浏览器的同源策略限制,它是浏览器最核心也最基本的安全功能。当一个请求url的三者之间任意一个与当前页面url不同即为跨域。例如->存在跨域例如 127.x.x.x:8001 -> 127.x.x.x:8002 存在跨域例如->存在跨域。原创 2022-11-28 16:00:56 · 13172 阅读 · 1 评论 -
Vue3 响应式原理
对象只能劫持 设置好的数据,新增的数据需要Vue.Set(xxx) 数组只能操作七种方法,修改某一项值无法劫持。Vue3 的响应式原理依赖了 Proxy 这个核心 API,通过 Proxy 可以劫持对象的某些操作。Vue2 使用的是 Object.defineProperty Vue3 使用的是 Proxy。使用一个全局变量 active 收集当前副作用函数,并且初始化的时候调用一下。当我们进行赋值的时候会调用 set 然后 触发收集的副作用函数。实现effect 副作用函数。原创 2022-10-28 01:29:59 · 11516 阅读 · 10 评论 -
小满Vue3第四十五章(Vue3 Web Components)
什么是 Web ComponentsWeb Components 提供了基于原生支持的、对视图层的封装能力,可以让单个组件相关的 javaScript、css、html模板运行在以html标签为界限的局部环境中,不会影响到全局,组件间也不会相互影响 。 再简单来说:就是提供了我们自定义标签的能力,并且提供了标签内完整的生命周期 。 Custom elements(自定义元素):JavaScript API,允许定义custom elements及其行为,然后可以在我们的用户界面中按照需要使用它们。Shado原创 2022-10-15 00:45:55 · 8464 阅读 · 10 评论 -
小满Vue3第四十四章(Vue3 性能优化)
从Performance页的表现结果来看,得分37分,并提供了很多的时间信息,我们来解释下这些选项代表的意思:FCP (First Contentful Paint):首次内容绘制的时间,浏览器第一次绘制DOM相关的内容,也是用户第一次看到页面内容的时间。Speed Index: 页面各个可见部分的显示平均时间,当我们的页面上存在轮播图或者需要从后端获取内容加载时,这个数据会被影响到。LCP (Largest Contentful Paint):最大内容绘制时间,页面最大的元素绘制完成的时间。原创 2022-09-12 02:45:14 · 12788 阅读 · 7 评论 -
小满Vue3第四十三章(webpack 构建 Vue3项目)
5.编写webpack config js。原创 2022-09-01 00:38:48 · 6562 阅读 · 10 评论 -
小满Vue3第四十二章(环境变量)
然后App.vue 输出 JSON.stringify(import.meta.env)我们就可以通过环境变量这个值 做一些事情比如 切花接口url 等。对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量。在 package json 配置 --mode env文件名称。Vite 在一个特殊的 import.meta.env。在根目录新建env 文件 可以创建多个。如下 env.[name]...原创 2022-08-19 03:00:43 · 7467 阅读 · 7 评论 -
小满Vue3第四十一章(docker 碰撞 vue3)
我们来看一下docker(容器) 可以做什么解决了什么问题如下案例领导要求你维护四个项目 每个项目 node版本不同 框架不同 是不是非常头疼 docker可以 帮你解决这个问题。原创 2022-08-17 01:42:53 · 6823 阅读 · 11 评论 -
小满Vue3第四十章(Vue响应性语法糖)
前言:感谢大家辛苦了,迎来了vue系列的第四十章。小提示 本章内容所讲的东西都是实验性的产物 暂时不要再生产环境使用,自己开发玩可以使用,不过大体框架应该不会变了。要求 vue版本 3.2.25 及以上vite 开启 reactivityTransform 如果你是 vue-cli 第一个例子 $ref在之前ref 修改值 和 获取值 都要.value 一下 感觉很繁琐,不想用.value 我们可以使用vue3的新特性$ref 。我们可以直接使用$ref 宏函数 就不需要.value 了。能帮我原创 2022-08-10 23:41:50 · 8574 阅读 · 4 评论 -
小满Vue3第三十九章(Vue开发桌面程序Electron)
Electron官网我们用的VsCode也是electron开发的electron内置了Chromium和nodeJS其中Chromium是渲染进程主要渲染和解析HTML,Nodejs作为主进程,其中管道用IPC通信。原创 2022-07-30 15:29:14 · 22371 阅读 · 94 评论 -
小满Vue3第三十八章(函数式编程,h函数)
之前跟大家介绍了两种vue编写风格分别是template模板方式,和JSX方式感觉JSX被大家吐槽的很厉害,其实用习惯还挺好用的今天介绍第三种函数式编程主要会用到h函数h函数拥有多种组合方式使用props传递参数接受emit定义插槽...原创 2022-07-12 02:16:03 · 7250 阅读 · 7 评论 -
小满Vue3第三十七章(unocss原子化)
CSS原子化的优缺点1.减少了css体积,提高了css复用2.减少起名的复杂度3.增加了记忆成本 将css拆分为原子之后,你势必要记住一些class才能书写,哪怕tailwindcss提供了完善的工具链,你写background,也要记住开头是bg安装 vite.config.ts main.ts 引入 配置静态css配置动态css(使用正则表达式)m-参数*10 例如 m-10 就是 margin:100px shortcuts 可以自定义组合样式 unocss原创 2022-07-07 01:24:48 · 11586 阅读 · 10 评论 -
小满Vue3第三十六章(Vue如何开发移动端)
开发移动端最主要的就是适配各种手机,为此我研究了一套解决方案在之前我们用的是rem 根据HTML font-size 去做缩放现在有了更好用的vw vhvw 视口的最大宽度,1vw等于视口宽度的百分之一vh 视口的最大高度,1vh等于视口高度的百分之一1.安装依赖因为vite中已经内联了postcss,所以并不需要额外的创建 postcss.config.js文件vite.config.ts如果你用的vite 是 ts 他这个插件并没有提供声明文件我已经帮大家写好了声明文件(良心)引入声明原创 2022-06-30 01:19:16 · 19578 阅读 · 24 评论 -
小满Vue3(Mitt)
在vue3中$on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus,对于这种情况我们可以使用Mitt库(其实就是我们视频中讲的发布订阅模式的设计)1.安装2.main.ts 初始化全局总线,vue 入口文件 main.js 中挂载全局属性3使用方法通过emit派发, on 方法添加事件,off 方法移除,clear 清空所有A组件派发(emit)B组件监听(on)监听所有事原创 2022-06-24 23:40:41 · 13903 阅读 · 18 评论 -
学习Vue3 第三十五章(event loop 和 nextTick)
在我们学习nextTick 之前需要先了解Event Loop 时间循环机制在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来js也支持了多线程webWorker 但是也是不允许操作DOM单线程就意味着所有的任务都需要排队,后面的任务需要等前面的任务执行完才能执行,如果前面的任务耗时过长,后面的任务就需要一直等,一些从用户角度上不需要等待的任务就会一直等待,这个从体验角度上来原创 2022-06-11 20:33:54 · 8313 阅读 · 17 评论 -
Vue3 (Vscode插件)
前端开发的编辑器有很多种如DW,hubilder,Web Storm,sublime,vscode,等等。 随着VsCode开源免费,丰富的插件,也是深受前端开发人员爱戴,在我们使用VsCode开发vue2的时候经常会下载一个插件vetur ,帮我们提供良好的代码智能提示在当vue3.2发布完之后 vetur 并不能给我们提供良好的代码提示,所以顺应而生Volar与相同,是一个针对的插件,不过与不同的是,提供了更为强大的功能(使用的时候需要把vetur 设置为禁用状态)与他配套的还有 并且还提供了编辑器快捷原创 2022-06-02 00:18:58 · 38698 阅读 · 19 评论 -
学习Vue3 第三十四章(Vue3集成Tailwind CSS)
Tailwind CSS 是一个 CSS 框架 它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类官网地址Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站。1.安装初始化项目 npm init vue@latest原创 2022-05-25 01:07:24 · 11899 阅读 · 16 评论 -
学习Vue3 第三十三章(css Style完整新特性)
上一章已经讲过了:deep(),其实还有两个选择器可以补充1.插槽选择器A 组件定义一个插槽<template> <div> 我是插槽 <slot></slot> </div></template><script>export default {}</script><style scoped></style>原创 2022-05-13 16:54:55 · 7255 阅读 · 10 评论 -
学习Vue3 第三十二章(详解Scoped和样式 穿透)
主要是用于修改很多vue常用的组件库(element, vant, AntDesigin),虽然配好了样式但是还是需要更改其他的样式就需要用到样式穿透scoped的原理vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式私有化模块化的目的。总结一下scoped三条渲染规则:给HTML的DOM节点加一个不重复data属性(形如:data-v-123)来表示他的唯一性 在每原创 2022-03-06 23:16:28 · 15551 阅读 · 4 评论 -
学习Vue3 第三十一章(了解UI库ElementUI,AntDesigin等)
作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发安装方法main ts引入volar插件支持。...原创 2022-03-06 10:35:50 · 7602 阅读 · 2 评论 -
学习Vue3 第三十章(编写Vue3插件)
插件插件是自包含的代码,通常向 Vue 添加全局级功能。你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法 你如果是function 就直接当install 方法去使用使用插件在使用 createApp() 初始化 Vue 应用程序后,你可以通过调用 use() 方法将插件添加到你的应用程序中。实现一个LoadingLoading.Vue<template> <div v-if="isShow" class="loading原创 2022-03-05 23:28:11 · 11286 阅读 · 27 评论 -
学习Vue3 第二十九章(Vue3定义全局函数和变量)
globalProperties由于Vue3 没有Prototype 属性 使用 app.config.globalProperties 代替Vue2// 之前 (Vue 2.x)Vue.prototype.$http = () => {}Vue3// 之后 (Vue 3.x)const app = createApp({})app.config.globalProperties.$http = () => {}过滤器在Vue3 移除了我们正好可以使用全原创 2022-03-05 15:37:50 · 10361 阅读 · 14 评论 -
学习Vue3 第二十八章(自定义Hooks)
Vue3 自定义Hook主要用来处理复用代码逻辑的一些封装这个在vue2 就已经有一个东西是Mixinsmixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现一次写代码,多组件受益的效果。弊端就是 会涉及到覆盖的问题组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。第二点就是 变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。Vue3 的自定义的hookVue3 的原创 2022-03-04 16:50:52 · 12072 阅读 · 4 评论 -
学习Vue3 第二十七章(自定义指令directive)
但这里有一个需要注意的限制:必须以的形式来命名本地自定义指令,以使得它们可以直接在模板中使用。show">开关{{show}} ----- {{title}}console.log("初始化====>");},// 在元素上做些操作console.log("初始化一次=======>");},console.log("初始化========>");},console.log("更新之前");},console.log("更新结束");},原创 2022-03-02 16:04:29 · 14525 阅读 · 9 评论 -
学习Vue3 第二十六章(深入v-model)
v-modelTIps 在Vue3 v-model 是破坏性更新的1.默认值的改变prop:value->modelValue; 事件:input->update:modelValue; v-bind的.sync修饰符和组件的model选项已移除 新增 支持多个v-model 新增 支持自定义 修饰符案例 子组件<template> <div v-if='propData.modelValue ' class="dialo...原创 2022-02-28 21:39:13 · 11857 阅读 · 19 评论 -
学习Vue3 第二十五章(TSX)
我们之前呢是使用Template去写我们模板。现在可以扩展另一种风格TSX风格vue2 的时候就已经支持jsx写法,只不过不是很友好,随着vue3对typescript的支持度,tsx写法越来越被接受1.安装插件npm install @vitejs/plugin-vue-jsx -Dvite.config.ts 配置2.修改tsconfig.json 配置文件 "jsx": "preserve", "jsxFactory": "h", "jsxFra原创 2022-02-28 00:02:53 · 23058 阅读 · 22 评论 -
学习Vue3 第二十四章(兄弟组件传参和Bus)
两种方案1.借助父组件传参例如父组件为App 子组件为A 和 B他两个是同级的<template> <div> <A @on-click="getFalg"></A> <B :flag="Flag"></B> </div></template> <script setup lang='ts'>import A from './原创 2022-02-27 00:03:03 · 11628 阅读 · 3 评论 -
学习Vue3 第二十三章(依赖注入Provide / Inject)
Provide / Inject通常,当我们需要从父组件向子组件传递数据时,我们使用props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。官网的解释很让人疑惑,那我翻译下这几句话:provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide提供的数据或方法。看一个例子父组件传递数据...原创 2022-02-26 00:58:17 · 9187 阅读 · 7 评论 -
学习Vue3 第二十二章(transition-group过度列表)
单个节点 多个节点,每次只渲染一个那么怎么同时渲染整个列表,比如使用v-for?在这种场景下,我们会使用<transition-group>组件。在我们深入例子之前,先了解关于这个组件的几个特点:默认情况下,它不会渲染一个包裹元素,但是你可以通过tagattribute 指定渲染一个元素。 过渡模式不可用,因为我们不再相互切换特有的元素。 内部元素总是需要提供唯一的keyattribute 值。 CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。&l...原创 2022-02-22 00:22:13 · 11002 阅读 · 4 评论 -
学习Vue3 第二十一章(transition动画组件)
Vue 提供了 transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡:原创 2022-02-18 22:57:20 · 11134 阅读 · 5 评论 -
学习Vue3 第二十章(keep-alive缓存组件)
内置组件keep-alive有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。开启keep-alive 生命周期的变化初次进入时:onMounted> onActivated 退出后触发 deactivated 再次进入: 只会触发 onActivated 事件挂载的方法等,只执行一次的放在 onMounted中;组件每次进去执行的方法放在 onActivat.原创 2022-02-15 22:06:50 · 11901 阅读 · 3 评论 -
学习Vue3 第十九章(Teleport传送组件)
Teleport Vue 3.0新特性之一。Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;类似于 React 的 Portal。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响使用方法通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置<Teleport to="body">原创 2022-02-13 23:48:27 · 8531 阅读 · 5 评论 -
学习Vue3 第十八章(异步组件&代码分包&suspense)
异步组件在大型应用中,我们可能需要将应用分割成小一些的代码块 并且减少主包的体积这时候就可以使用异步组件顶层 await在setup语法糖里面 使用方法<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()<script setup>const post = await fetch(`/api/post/1`).then(r => r.json())</script>父组件引用子组件原创 2022-02-13 15:51:35 · 13048 阅读 · 13 评论 -
学习Vue3 第十七章(插槽slot)
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。匿名插槽1.在子组件放置一个插槽<template> <div> <slot></slot> </div></template>父组件使用原创 2022-02-13 00:03:56 · 12644 阅读 · 10 评论 -
学习Vue3 第十六章(动态组件)
什么是动态组件 就是:让多个组件使用同一个挂载点,并动态切换,这就是动态组件。在挂载点使用component标签,然后使用v-bind:is=”组件”用法如下引入组件import A from './A.vue'import B from './B.vue' <component :is="A"></component>通过is 切换 A B 组件使用场景tab切换 居多注意事项1.在Vue2 的时候is 是通过组件名称切换的 在Vu.原创 2022-02-12 11:13:07 · 16440 阅读 · 9 评论 -
学习Vue3 第十五章(全局组件,局部组件,递归组件)
配置全局组件例如组件使用频率非常高(table,Input,button,等)这些组件 几乎每个页面都在使用便可以封装成全局组件案例------我这儿封装一个Card组件想在任何地方去使用<template> <div class="card"> <div class="card-header"> <div>标题</div> <div>副标题</div>原创 2022-02-10 16:42:18 · 17563 阅读 · 20 评论 -
学习Vue3 第十四章(父子组件传参)
父组件通过v-bind绑定一个数据,然后子组件通过defineProps接受传过来的值,如以下代码给Menu组件 传递了一个title 字符串类型是不需要v-bind<template> <div class="layout"> <Menu title="我是标题"></Menu> <div class="layout-right"> <Header><原创 2022-02-09 22:22:32 · 28699 阅读 · 26 评论