vue3
vue3+ts 使用高德地图JSAPI 加载API并初始化地图
安装jsapi加载器 npm i @amap/amap-jsapi-loader 复制安装jsap ts声明（很久没更新了，j建议把声明文件复制到项目中根据官方文档调整）npm i @amap/amap-jsapi-types复制加载JSAPI并初始化地图useAMap.tsimport AMapLoader from "@amap/amap-jsapi-loader"; im
日期 2023-06-12 10:48:40
如何正确学习vue3.0源码
为什么要学源码技术是第一生产力学习 API 的设计目的、思路、取舍学习优秀的代码风格学习组织代码的方式学习实现方法的技巧学习 ES67 新 API、TS 高级用法不给自己设限，不要让你周围人的技术上限成为你的上限面试加分项装逼利器学习源码副作用画虎不成反类犬（强行上马 vue3，自己焦头烂额、项目难以维护、同事苦不堪言）为了用而用，而不是因地制宜喜欢炫技写一下看似搞大上，实际没有可读性，影响团队协
日期 2023-06-12 10:48:40
Vue3源码06: reactive、ref相关api源码实现
Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 Vue3源码03: Vue3响应式核心原理 Vue3源码04: Vue3响应式系统源码实现1/2 Vue3源码05 : Vue3响应式系统源码实现（2/2） “原本关于响应式源码的分析已经告一段落，因为有了前面几篇文章的基础，阅读剩余部分的源码已经比较容易。但有不少朋友后台留言觉得这部分内容虽然
日期 2023-06-12 10:48:40
Vue3源码09: 组件的渲染和更新流程
Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 Vue3源码03: Vue3响应式核心原理 Vue3源码04: Vue3响应式系统源码实现1/2 Vue3源码05 : Vue3响应式系统源码实现（2/2） Vue3源码06: reactive、ref相关api源码实现 Vue3源码07: 故事要从createApp讲起 Vue3源码08: 虚
日期 2023-06-12 10:48:40Vue3.0实现todolist之路由传参（query模式传参和params传参）
上一篇写道路由跳转 这里写一写路由跳转的时候是如何进行路由传参的 首页start的传参问题 开始页引进ref 先定义几个参数，然后通过路由的形式把这几个参数传递到另一个路由 let name = ref("jack"); let num = ref(10); let obj = ref({ msg: "start",
日期 2023-06-12 10:48:40
使用Vue3 + Vite + Pinia创建SPA
原文链接：https://labs.pineview.io/learn-how-to-build-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia/[1]作者：Andrei Rusu[2]正文从这开始~介绍诞生于2014年的Vue.js，无疑是目前领先的前端框架之一，随着社区的发展以及生态系统的壮大，在相当一段时间内，它的低位都
日期 2023-06-12 10:48:40Vue3 最长递增子序列详解
大家好，又见面了，我是你们的朋友全栈君。 Vue3 最长递增子序列研究本文初衷彻底讲清楚 Vue3 源码中实现最长递增子序列的算法。概念名词**最长递增子序列：**在一个给定的数值序列中，找到一个子序列，使得这个子序列元素的数值依次递增，并且这个子序列的长度尽可能地大。最长递增子序列中的元素在原序列中不一定是连续的。比如：序列 [10, 9, 2, 5, 3, 7, 101, 18] 的最长递
日期 2023-06-12 10:48:40vue3组合式api
这个思想上有点类似流程控制框架，将一个组件中的多个关注点分离、抽取，然后能进一步复用、编排官方文档：https://v3.cn.vuejs.org/guide/composition-api-introduction.html#介绍使用上来讲，就是编写的api方式变了，举个例子：下面是我实际写的一个小组件<script lang="tsx"> interface P
日期 2023-06-12 10:48:40自定义全局方法Vue3和Vue2有何区别？
展开 var __INLINE_SCRIPT__=function(){"use strict";var e=function(e,a,t){function i(e,a){var t=e.match(new RegExp(a+"\\s*=\\s*[\"']?([^\"'\\s>]+)[\"'
日期 2023-06-12 10:48:40Vue3导入方法太麻烦？试试这个不用导入方法的插件！
展开 var __INLINE_SCRIPT__=function(){"use strict";var e=function(e,a,t){function i(e,a){var t=e.match(new RegExp(a+"\\s*=\\s*[\"']?([^\"'\\s>]+)[\"'
日期 2023-06-12 10:48:40Cloud Studio尝鲜，在线构建vue3应用
Cloud Studio是一款在线版的VsCode,无需本地安装VsCode，浏览器上在线code,对于不想安装本地vsCode，如果你远程办公，如果你不想背着电脑回家，家里有一台能联网的代码，那么你不用远程控制公司电脑，你只需登录cloud studio就可以在线编码，并实时保存，这是一种趋势，也是一种非常不错的体验,本文是一篇笔者关于Cloud Studio在线编程的入门使用体验。正文开始..
日期 2023-06-12 10:48:40Vue3—父子组件传值(子组件使用 emit 传值到父组件)
大家好，又见面了，我是你们的朋友全栈君。 Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context（组件上下文）中的emit。官网APIhttps://v3.cn.vuejs.org/guide/migration/emits-option.html 例1：Tab菜单子组件创建子
日期 2023-06-12 10:48:40Vue3中的方法
tips:我们用 methods 选项向组件实例添加方法，它应该是一个包含所需方法的对象。Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。这些 methods 和组件实例的其它所有 property 一样可以在组件的
日期 2023-06-12 10:48:40vue3解构赋值失去响应式引发的思考！
前言vue3发布以来经历两年风头正盛，现在大有和react 平分天下的势头，我们知道他是基于proxy 实现响应式的能力， 解决了vue2所遗留下来的一些问题，同时也正由于proxy的特性，也提高了运行时的性能凡事有利有弊， proxy虽然无敌，但是他也有本身的局限，从而产生一些我认为的弊端（其实就是不符合js语言的自然书写方式，有的人觉得就是个特殊写法，他不属于弊端）1、 原始值的响应式系统的实
日期 2023-06-12 10:48:40vue3组件的数据双向绑定
第一步 在组件中向props添加modelValue属性export default defineComponent({ props: { modelValue: String },复制在组件更新值的时候，发送一个update:modelValue的事件<input type="text" class="form-control"
日期 2023-06-12 10:48:40Vue3中的计算属性
tips：在Vue3中，我们可以用computed来输出计算属性如果computed和data属性同时使用，data属性优先级更高，会有警告提示在Vue3中，data,methods,computed中的属性名称不要重复example:<!DOCTYPE html> <html lang="en"> <head> <meta c
日期 2023-06-12 10:48:40
Vue3中的监听器
tips：在Vue3中，我们可以可以使用监听器去监听某个数据发生改变，然后可以触发函数watch代表监听器，里面可以放入函数，函数名称对应要监听的数据监听器函数支持两个参数，第一个是新值，第二个是老值监听器可以监听到data和computed里面的数据example:<!DOCTYPE html> <html lang="en"> <head>
日期 2023-06-12 10:48:40Vue3监听器深度使用
tips：监听器的拓展，以json形式去书写，这种写法可以设定一些状态handler代表回调函数，监听到会触发的函数deep，默认值为false,需要设置为true，作用是让监听器变为深度监听immediate,让handler在初始化的时候立即执行一次，默认值为false,需要设置为trueexample:<!DOCTYPE html> <html lang="en&
日期 2023-06-12 10:48:40Vue3表单输入绑定
tips：在Vue3中，可以使用v-model来绑定表单元素输入内容v-model也叫双向绑定，期间数据和表单元素的输出是同步的v-model在单选上，会输出input的value，并且不使用name就可以进行分组v-model在复选上，代表的是true和falsev-model在文本域上，代表的是文本内容v-model在下拉框上，代表的是option的内容v-model的值会覆盖掉原生属性的值e
日期 2023-06-12 10:48:40Vue3--系统修饰键
tips：可以使用ctrl,alt,shift,meta四种系统修饰键meta在不同操作系统中代表的是不同的按键，Windows中是win键，Apple系统中是command键.exact是用来修饰系统修饰键，表示精准控制系统修饰键可以与其他修饰键一起使用example：<!DOCTYPE html> <html lang="en"> <head&
日期 2023-06-12 10:48:40Vue3组件基础
tips：在Vue3中，可以使用component组件方法来自定义组件component方法的第一个参数为组件名称，定义之后可以以html方式输出component方法的第一个参数为json,template属性为组件输出内容component方法可以放入createApp()的所有属性组件默认无法使用createApp()里面的数据，并且每个组件数据不共通，是独立的example:<!DO
日期 2023-06-12 10:48:40重温vue3脚手架之从创建到初始setup
目录vue脚手架创建文件及注意事项一、注意：用脚手架创建vue3的文件夹时需要脚手架版本在4.5.0版本以上才支持二、查看脚手架的版本：vue -V三、如果脚手架的版本过低，可以执行：npm install -g @vue/cli（重新安装脚手架最新版本）四、使用脚手架创建vue3文件夹，在桌面上建一个：进入cmd，输入cd Desktop进入桌面，输入vue create （创建的文件名称），回
日期 2023-06-12 10:48:40Vue3知识点之数据侦测
Vue 的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。实现可响应对象的方式通过可响应对象，实现对数据的侦测，从而告知外界数据变化。实现可响应对象的方式：getter 和 setterdefinePropertyProxy关于前两个 API 的使用方式不多赘述，单一的访问器 getter/setter 功能相对简单，而作为 Vue2.x 实现可响应对象的 API - definePr
日期 2023-06-12 10:48:40兼容vue2和vue3版本的插件实现过程
需求说明 vue2升级vue3中很多插件是单独进行使用的，但是项目进行升级的时候如果直接进行项目的全部重构工作量是很大的，当然这篇文章解决不了这个终极问题，这里只是分享创建一个可以支持vue2和vue3插件的实现过程。 引入vue-demiyarn add vue-demi or npm install vue-demi复制vue-demi 官网[vue-demi])(https://www.n
日期 2023-06-12 10:48:40vue3 axios跨域_vueaxios跨域请求
大家好，又见面了，我是你们的朋友全栈君。// vue.config.js const path = require("path"); const webpack = require("webpack"); module.exports = { // 项目部署的基本路径 // 默认假设你的应用将会部署在域名的根部 // 比如，https://www.vue-c
日期 2023-06-12 10:48:40Vue3中Slot用法
插槽基本使用插槽的用途就和它的名字一样：有一个缺槽，我们可以插入一些东西。插槽 slot 通常用于两个父子组件之间，最常见的应用就是我们使用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是可以让我们自定义的，这就是使用了插槽的原理。我们在项目中新建一个 child.vue 文件，用来当作子组件，它的代码也非常的简单。<template> <div class="c
日期 2023-06-12 10:48:40Vue3移动端组件库Varlet源码主题阅读之一：本地启动服务时都做了什么
本文为Varlet组件库源码主题阅读系列第一篇Vue开源的组件库有很多，基本各个大厂都会做一个，所以作为个人再重复造轮子其实意义也不是很大，但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。不同的组件库架构肯定有所不同，不过大体思路应该都差不多，笔者在众多组件库中挑选了Varlet 来进行剖析，Varlet是一个基于 Vue3 开发的 Material 风格的移动端组件库，本系列的文章会全面解析
日期 2023-06-12 10:48:40微前端qiankun接入Vite子应用含Vue3和React18
主应用basic-vue-app(vue3+vite)安装qiankunnpm install qiankun复制新建src/qiankun/index.js文件，进行单独的抽离import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vue-
日期 2023-06-12 10:48:40vue3 markRaw指定对象不包装__v_skip
vue3中想要指定一个对象不会被包装成proxy对象，可使用markRaw方法包装，该方法本质是为源对象增加__v_skip属性，意思是告诉vue,若要代理该对象，请跳过处理<template> <div> <div>{{state.name}}</div> <button @click="myFn"&g
日期 2023-06-12 10:48:40我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss】
前言聊一下自己使用这些技术的一些体会与心得，不做具体的搭建过程了，说一下工程的设计思想与遇到了哪些问题。项目背景最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2 + Js + Webpack + Vuex 上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架，因为我觉得先把自己手头的技术掌握扎实才是重中之重，团队的同学绝大多数是一些基
日期 2023-06-12 10:48:40Vue3项目框架搭建封装，一次学习，终身受益【万字长文，满满干货】
theme: juejin携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情前言入职新公司后，发现代码仓库里，项目搭建的比较乱，每个项目使用的都不太一样，不利于统一规范化管理，我结合已有的业务积累和优秀的实践经验，搭建了一套移动端模板项目，在这里和大家做一个分享。一般来说，大部分前端去公司都是干活，拧螺丝钉的，项目的框架都是架构师或者小组负责人搭建封装好的
日期 2023-06-12 10:48:40