vue3工程化第21页

Vue3学习记录（二）--- 组合式API之计算属性和侦听器

一、计算属性1、简介计算属性computed()，用于根据依赖的响应式变量的变化，进行自动的计算，并返回计算后的结果。当依赖的响应式变量发生变化时，computed()会自动进行重新计算，并返回最新的计算结果。如果依赖的响应式变量没有发生变化，则computed()会将计算的结果进行缓存，后续再调用时，将会返回缓存的计算结果，而不会重新计算。2、使用基础用法：computed()方法期望接收一个g

努力的小朱同学·2024-02-03 19:08

【vue3.0】26.0 某东到家（廿六）——不同设备适配和项目上线

不同设备适配目前是针对普通手机的屏幕尺寸设计，如果需要适配比如平板电脑，等比例放大，需要进行设备配置。修改public\index.html只需要在title后面增加如下代码：//设备屏幕的宽度varwidth=document.documentElement.clientWidth||document.body.clientWidthvarratio=width/375varfontSize=1

bobokaka·2024-02-03 18:15

vue3.0项目启动“npm run dev”报错：error when starting dev server:Error: Cannot find module ‘node:path‘ .....

vue3.0项目，必须安装node版本等于或者大于15.0.0版本；#安装依赖npminstall--registry=https://registry.npmmirror.com#启动服务npmrundev

至尊宝♬·2024-02-03 17:45

初识vue3

文章目录1.Vue3的好处2.create-vue搭建vue3项目3.项目目录和关键文件4.组合式API-setup选项5.组合式API-reactive和ref函数①reactive②ref()6.组合式

W`hite·2024-02-03 15:54

#10外部网页跳转vue3+SpringMVC解码GBK编码的参数

目录1、背景2、失败尝试之iconv-lite2.1、安装和使用2.2、遇到的问题2.3、解决方案(vite-plugin-node-polyfills)2.4、测试3、成功尝试3.1、前端参数读取方式3.2、后端解码1、背景外部jsp页面中编码方式为GBK，跳转到vue页面时如果使用decodeURIComponent或者decodeURI均不可成功解码，因为这两个方法解码时使用的是UTF-8。

wbzybfa·2024-02-03 15:28

Vue3入门到实战笔记02

9.watch作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据：ref定义的数据。reactive定义的数据。

jxncxgx·2024-02-03 14:30

Vue3入门到实战笔记01

基于Vite创建Vue3工程一、创建Vue3工程npmcreatevite@latest按照提示创建项目cdvue3study进入所创建的项目目录npminstall安装项目需要的依赖包npmrundev

jxncxgx·2024-02-03 14:00

Vite与Vue-cli的区别和特点

目录前言1.如何使用Vite和Vue-cli创建vue3.0项目2.Vite与Vue-cli的特点3.Vite与Vue-cli之间的区别总结前言Vite是创建vue3.0时的一个基本项目脚手架和开发服务器的构建工具

程序员--韩同学·2024-02-03 12:40

前端工程化之：webpack1-11(其他配置)

目录一、context二、output1.library2.libraryTarget三、target四、module.noParse五、resolve1.modules2.extensions3.alias六、externals七、stats一、contextcontext:path.resolve(__dirname,"app")该配置会影响入口和loaders的解析，入口和loaders的相

小李老笨了·2024-02-03 12:10

前端工程化之：webpack1-12(常用扩展)

目录前言一、CleanWebpackPlugin二、HtmlWebpackPlugin三、CopyPlugin四、webpack-dev-server五、file-loader六、url-loader七、路径问题前言由于webpack、webpack-cli、webpack-dev-server会存在版本不兼容问题，所以这里使用的版本如下："devDependencies":{"clean-web

小李老笨了·2024-02-03 12:10

七.Vue3.x中使用Axios请求远程真实Api接口数据

https://github.com/axios/axios1、安装npminstallaxios--save或者yarnaddaxios或者cnpminstallaxios--save2、引入使用importAxiosfrom"axios";axios.get('/user?ID=12345').then(function(response){//handlesuccessconsole.log

小柠有点萌·2024-02-03 11:45

Electron+Vue3+Vite的产品级模板项目

1.electron-vue3-template基于Vue3+Electron+TypeScript的客户端程序模板，使用Vite和ElectronForge构建和打包。

china_jeffery·2024-02-03 10:52

vue3 markdown编辑器推荐（maven-editor & vditor & tiptap ）

最近项目需要用到markdown编辑器，使用了三种maven-editor(http://www.mavoneditor.com/?spm=a2c6h.12873639.article-detail.9.aaad62affAKmTV)vditor(https://b3log.org/vditor/demo/index.html?utm_source=ld246.com)tiptap(https:/

yggjdle·2024-02-03 10:33

Element Plus修改表格行、单元格样式

(Vue3)consttableData=[{name:"clz",age:21,job:"Coder",},{name:"czh",age:21,job:"Coder",},{name:"赤蓝紫",age

梅花十三儿·2024-02-03 10:59

【Vue3】vue组件生命周期总结

vue3官网生命周期生命周期vue组件实例的生命周期一般是从创建、挂载到卸载销毁；在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。图示：图片来自于vue3官网。

ZSK6·2024-02-03 09:03

【vue3】vue3源码探索之旅：compiler-core（一）

简言compiler-core包是vue3源码代码编译的核心代码包，且与平台无关，这个包主要功能是将代码解析成ast、然后转换成codegenNode对象、再编译生成可执行代码（render渲染函数）。

ZSK6·2024-02-03 09:33

【Vue3】组件props的使用

简言Props是一种特别的attributes，你需要在组件上声明注册，然后才能识别成props,而不是普通的attributes。本篇主要讲解props的用法，以及传递后的porps值如何保持其响应性。Propsprops声明如果一个prop的名字很长，应使用camelCase形式，因为它们是合法的JavaScript标识符，可以直接在模板的表达式中使用，也可以避免在作为属性key名时必须加上引

ZSK6·2024-02-03 09:03

【Vue3】源码探索之旅：compiler-core之parseChildren函数（二）

简言parseChildren函数是在baseParse函数中作为createRoot函数的子节点参数传入的，今天来探索下parseChildren函数。parseChildren在compiler-core/src/parse.ts文件内。parseChildren这个函数就是用来解析模板字符串内容的，里面有个while循环以栈的形式不断读取模板字符串进行解析，直到解析完毕，然后进行空白处理并返

ZSK6·2024-02-03 09:26

vue3 vuedraggable draggable element must have an item slot

vue3+vite看官网使用这种{{element.name}}实战可看这篇

Roottt_·2024-02-03 09:54

从零开始使用Konva，画图并绑定节点。

实战可行，vue3+vite+ts实现实现电子地图，左侧列表可拖拽绑定地图可绑定点设备坐标安装npminstallkonva插件引入importKonvafrom'konva'importKonvafrom'konva'import

Roottt_·2024-02-03 09:53

vue-3d-loader vue实现3d模型展示（vue2）

官方文档:快速上手|Vue3dloader(king2088.github.io)（注意：看清版本vue3跟2使用版本不同）1.下载npmivue3[email protected].引入1.全局引入importvue3dLoaderfrom"vue

只玩辅助啊·2024-02-03 09:08

vue-3d-loader

VueJSandthreeJS3dviewer是对vue-3d-model的改进，降低Threejs使用难度#默认安装"vue-3d-loader":"^1.3.4",只支持vue2npmivue-3d-loader#vue3

dragonzoebai·2024-02-03 09:04

vue3.0 Composition API上手体验

vue3.0CompositionAPI上手体验vue3.0对比vue2.0优势vue3.0相比vue2.0性能提升了近50%，框架内部做了大量性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听

廊坊吴彦祖·2024-02-03 08:57

Vue3.0（一）：Vue的引入-options api-模板语法

Vue的引入方式CDN方式进行引入将以下script标签引入即可Document//使用Vueconstapp=Vue.createApp({template:`hello`,});//挂载app.mount("#app");本地引入可以将CDN中地址中的代码，拷贝到一个vue.js文件中之后引入该js文件即可命令式编程和声明式编程的区别以上案例是实现了一个计数器的功能左边是Vue实现右边是原生实

前端大菜鸟_·2024-02-03 08:55

Vue3中ref和reactive的用法和区别

目录两者的区别：原理角度对比：使⽤角度对⽐：用法实例：实例：Vue2中我们通常将响应式数据放在data中，再Vue3中提供了组合式API的写法，即数据和方法写在一起，便于维护。

浮生若梦777·2024-02-03 08:14

nvm-windows的安装和配置

下载安装nvm-setup.zip用于切换node版本，旧项目用的是14版本，vue3需要的node版本要高些,所以运行vue3项目前需要用nvm切换node的版本先。

www666_·2024-02-03 07:04

vite+vue3发布自己的npm组件+工具函数

记录一下个人最近一次发布npm组件的过程：一、创建组件和工具函数执行命令创建一个空项目：npmcreatevite创建过程稍微有些慢，不知何故？其中选择vue,个人暂时使用的JS。在src目录下面创建一个文件package存放组件和公共的JS方法案例中table是放组件的，utils是放方法的。table组件里面的主要内容就是个人业务组件，随便写点结果：{{MyValue}}测试按钮import{

well2049·2024-02-03 07:34

npm WARN deprecated [email protected]: Please upgrade to version 7 or higher

当使用npm下载vue3-lazy时出现一下错误时的解决方案报错：[email protected]:Pleaseupgradetoversion7orhigher尝试使用过一下命令更新

黎明寄波澜*·2024-02-03 06:30

vue3 微信扫码登录及获取个人信息实现的三种方法

一、流程：微信提供的扫码方式有两种,分别是:跳转二维码扫描页面内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为:1.第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；2.通过code参数加上AppID和AppSecret等，通过API换取access_token；3.通过access_token进行接口调用，

@卓越俊逸_角立杰出@·2024-02-03 06:15

Vue3+TS+Vite+Pinia学习总结

VUE3介绍vue2和vue3之间的区别因为需要遍历data对象上所有属性，所以如果data对象属性结构嵌套很深，就会存在性能问题。

天生我材必有用_吴用·2024-02-03 06:07

【Vue3+Vite】Vue3视图渲染技术快速学习第二期

文章目录一、模版语法1.1插值表达式和文本渲染1.1.1插值表达式语法1.1.2文本渲染语法1.2Attribute属性渲染1.3事件的绑定二、响应式基础2.1响应式需求案例2.2响应式实现关键字ref2.3响应式实现关键字reactive2.4扩展响应式关键字toRefs和toRef三、条件和列表渲染3.1条件渲染3.2列表渲染四、双向绑定五、数据监听器一、模版语法Vue使用一种基于HTML的模

道格维克·2024-02-03 06:16

vue3+vite+vue-router4.x实现动态添加路由

实现内容：1.根据后台返回的菜单，前端实现动态添加路由；2.解决刷新页面时，路由消失/页面空白的问题；第一步：请求后台，返回菜单数据【内容如下】//后台返回的菜单数据this.menuList=[{id:1,path:'/home',name:'首页',icon:true,children:[],component:'/home/home'},{id:12,path:'/pinia',name:'

listener_life·2024-02-03 06:46

【Vue3+Vite】路由机制router 快速学习第四期

文章目录路由简介路由是什么路由的作用一、路由入门案例1.创建项目导入路由依赖2.准备页面和组件3.准备路由配置4.main.js引入router配置二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结路由简介路由是什么路由就是根据不同的URL地址展示不同的内容或页面。页面切换路由的作用单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升

道格维克·2024-02-03 06:43

和鲸科技与智谱AI达成合作，共建大模型生态基座

近日，上海和今信息科技有限公司（简称“和鲸科技”）与北京智谱华章科技有限公司（简称“智谱AI”）签订合作协议，双方将携手推动国产通用大模型的广泛应用与行业渗透，并积极赋能行业伙伴探索领域大模型的工程化落地

ModelWhale·2024-02-03 05:02

Vue3快速上手

一、创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue

吃一口你的梦。·2024-02-03 05:53

vue3项目中数字滚动效果

前言：目前大多数新的vue项目都采用了vue3去写，在最近的项目中，需要展示数字滚动的效果，我就想到了之前用多的vue-count-to数字滚动插件，发现这个插件只使用于vue2项目，在vue3项目中并不试用

张不大了·2024-02-03 05:17

利用VUE3生成二维码（两种方式）

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）1、qrcodenpm``install``--saveqrcodejs2//所需页面导入importQRCodefrom'qrcodejs2'import{onMounted,ref}from'vueimportQRCodefrom'qrcodejs2'constqrCodeUrl=ref(null)constcreatQrC

小猫瘦瘦·2024-02-03 04:21

VUE3+TS使用OpenSeadragon学习之旅，实现多图片切换效果

1.官方网站：OpenSeadragon2.使用npm下载插件：npminstallopenseadragon3.在index.html文件引入资源4.组件使用（一张图片显示效果）1.引入OpenSeadragonimportOpenSeadragonfrom"openseadragon"2.存放图片的标签3.初始化实例constviewer=OpenSeadragon({id:"opensead

小猫瘦瘦·2024-02-03 04:51

前端工程化之多个项目如何同时高效管理 — monorepo

monorepo不仅限于前端，但此篇博文只谈前端。是什么wikipedia:Inversioncontrolsystems,amonorepo("mono"meaning'single'and"repo"beingshortfor'repository')isasoftwaredevelopmentstrategywherecodeformanyprojectsisstoredinthesamer

三猪技术团队·2024-02-03 03:20

Vue学习笔记六

神里の凌华·2024-02-03 02:00

Vue 学习笔记

Vue学习笔记1前端工程化与webpack1.1前端工程化1.1.1实际的开发模块化（js的模块化、css的模块化、资源的模块化）组件化（复用现有的UI结构、样式、行为）规范化（目录结构的划分、编码规范化

称霸幼儿园18·2024-02-03 02:56

vue3项目创建权限问题解决以及淘宝镜像过期解决

设备是：MacBook并非Windows环境近期使用vite创建vue3项目，发现要么一直卡着要么失败。用命令行创建也是一直卡着。

伊昂呀·2024-02-02 23:00

基于VUE3+Nodejs+MySQL实现的新闻搜索引擎系统源码+数据库

毕业设计基于VUE3+Nodejs+MySQL实现的新闻搜索引擎系统源码+数据库前端：VUE3+Vite

梦の落花·2024-02-02 23:36

Vue3 vant4 底部tabbar图标如何修改为自定义图片

1、引入静态图并作为变量使用2、制作数据结构用于v-for遍历记得每个tabbar准备两个图片，默认和选中。3、safe-area-inset-bottom是vant4移动端底部安全区适配，如果不需要则去掉。4、tabbar的详细参数请看官方文档https://vant-ui.github.io/vant/#/zh-CN/tabbarimport{ref}from'vue'//1、引入项目静态图，

HaushoLin·2024-02-02 22:59

Vue3如何深度修改vant4 css样式

1、当前页面只用一次某个组件vue2是::v-deep.vant-button{}vu3则是::v-deep(.vant-button){}页面示例回到顶部::v-deep(.van-button){background-color:orange;}}2、页面多次使用同个组件，如何修改其中一个，而不改变其他组件原本的样式。例如下面我们只修改productBox下的button，在它外层包裹一个di

HaushoLin·2024-02-02 22:58

Vue3 vant4 解决引入的Toast和dialog样式丢失的bug

情景再现：正确做法：在main.ts中单独引入import'vant/es/toast/style'import'vant/es/dialog/style'import{Toast,Dialog}from'vant'app.use(Toast)app.use(Dialog)效果如下轻松拿下。

HaushoLin·2024-02-02 22:56

vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线

vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线组件库的el-tree样式由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造参考的博客并做了一部分优化

Thurmanwang·2024-02-02 22:08

菜鸡后端的前端学习记录-2

忘了记一下看的视频了，有兴趣的可以去看一看，目前感觉讲的还不错，但是需要有一定基础：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】（学习记录第二部分，都写到一个博客里太长了，不利于阅读复习

无名一小卒·2024-02-02 21:30

docker 安装 nginx 发布Vue项目

直接映射会出错）5.停止运行容器并删除容器6.重新启动容器（映射相应的目录文件）7.访问默认页面8.发布Vue项目9.配置反向代理（前后端分离，基本上都需要反向代理来解决跨域问题）10.实战案例：发布开源项目vue3

文子阳·2024-02-02 20:51

使用 vite、typescript、vue3、element-plus、pinia、vue-router、axios、tailwindcss 等技术搭建一个基本的项目模版

介绍使用vite、typescript、vue3、element-plus、pinia、vue-router、axios、tai

zhfy啊·2024-02-02 20:42

推荐频道

vue3工程化