vue3中使用ref语法糖
自从引入组合式 API 的概念以来，一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。 响应式对象存在解构丢失响应性的问题，而 ref 需要到处使用 .value 则感觉很繁琐，并且在没有类型系统的帮助时很容易漏掉 .value 2e8b084ed6e50cb5502a5d78669d8950.png 写法优化 以上是官方原话。大概就是新的语法糖 可以让我们更方便的使用ref，而不用每次都写.value 大概就是把这样的代码,...
Vue.js 3 + Vite 项目在安卓App中内嵌展示方案
双击Vite打包后的index.html文件直接在浏览器中打开 最近需要实现一个功能：改造现有 Vue 3 项目，使打包后的项目文件能够直接内嵌在安卓APP（大屏）中使用，即在安卓应用中使用 WebView 通过 的方式加载 Vite 打包后的 index.html 文件。 目前，项目使用的部分技术栈如下： Vue.js 3.2.47 Vue Router 4.1.6 Pinia 2.0.32 element plus 2.3.3 Vi...
Vue3事件总线——从eventBus到mitt
前言 在 3 中，默认情况下是没有内置的 EventBus，也就是说，Vue 3 没有像 Vue 2 那样的 和 的全局事件系统。 这是因为在 Vue 3 中，官方推荐使用 Composition API 以及更灵活的函数式组件，同时提倡使用更明确的通信方式。比如 、 、 / 、 不过在一些小项目中，我们仍然希望可以使用 而不用pinia进行全局的管理。这个时候，Vue3里使用最广来实现eventBus的方法就是第三方库m...
template setup 和 tsx 的混合开发实践
一般而言，我们在用 的时候，都是使用模板进行开发，但其实 中也是支持使用 的。 最近我研究了一下如何在项目中混合使用二者，并且探索出了一些模式， 本文就是我在这种开发模式下的一些总结和思考，希望能帮助到大家。 由于 就是 版本的 ,二者基本上可以认作一个东西，所以下文使用 的地方，一般而言对于 也同样适用。 通常我们都是通过模板来定义我们的ui，这是官方推荐的编写方式，模板开发有很多优点,比如: 简单易上手，接近原生html的编写模式。...
Vue3 + Vite 封装 Icon 组件
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 在日常开发中，图标是大多数开发者都会有需求的，但在一个项目中，我们一般只引入一个 组件库，如 、 ，组件库提供的图标往往是有限的，并不能满足所有的需要。所以在本文中，介绍如何基于 二次封装一个 组件。 可以访问 80 多个流行的开源图标集，其中有超过 5000 个图标可供选择，基本上能满足了我们项目中的所有需求了。在 上，你可以查询到你想要的组件库图标并使用，如 、 。 安装依赖 首...
Vue3+Ts+Vite+Pinia项目从0-1搭建
XXX甄选 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。 面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。 一、环境准备 node环境 16.16.0 pnpm 8.9.2...
最直白的Vue3教程，5分钟就看完了
先来说说一些API的用法 setup script 这个语法糖真的是太爽了，想想之前vue2的那些写法，真的让人很恼火，自由度非常不够， 体验过的都说好 别急，咱们继续 ref & reactive & 事件 总结三点： ref ：需要响应式的常量，但是使用或者赋值时需要 reactive ：需要响应式的对象或者数组，可直接使用或赋值 事件 ：在 中，直接定义事件，不需要像vue2那样在method中定义 computed & watc...
VUE生命周期含父子组件生命周期简介
一、加载渲染过程 父beforeCreate 父created 父beforeMount 子beforeCreate 子created 子beforeMount 子mounted 父mounted 二、子组件更新过程 父beforeUpdate 子beforeUpdate 子updated 父updated 三、父组件更新过程 父beforeUpdate 父updated 四、销毁过程 父beforeDestroy 子beforeDes...