Vue开发实战总结
分享
文章平均质量分 84
Vue框架已经成为了前端开发中不可或缺的一部分，但是在实际项目中，我们常常会遇到各种各样的问题和挑战。如何高效地使用Vue进行开发？如何避免常见的坑点和错误？如何利用工具提升开发效率？
本专栏将从实战出发，分享作者在多个Vue项目中积累的经验和教训，带你深入了解Vue的开发方式和工具，让你能够更加
超级会员免费看
程序员海军
这个作者很懒，什么都没留下…
展开
-
全新升级：学习Vue精华总结，一切尽在掌握！
在这里，不论你正准备跨入Vue的世界，还是老司机寻求新的技巧，我们的内容都将贴近实战，直击核心，让你的每一步都坚定而有力。加入我们，我们一起，为你的前端之路添砖加瓦，让你走得更稳，更远，直至视野尽头的广阔景致。让我们一起，抗击技术迅猛的潮流，不断前行！迎接前端领域的不断演进，我们的特色专栏成为了探索无限可能的舞台。我们承诺，将持续更新Vue3、Vue2以及整个Vue生态的技术动态！每一篇内容都是精心策划，旨在为你呈现最深入的框架应用分析和最前沿的前端技术趋势。原创 2024-02-21 10:38:09 · 109 阅读 · 0 评论
-
基于 Vue 开发一个 多人聊天室（万字长文） - 从 0 到 1 篇
前言在上个月初，接到一个需求，要开发一个 聊天通讯 模块 并且 集成到 项目中的多个 入口，实现业务数据的记录追踪.接到需求后，还挺开心，这是我第一次 搞 通讯 类的需求，之前一直是 B 端 的业务需求，不过现在也是在做这个方向，感觉 B 端 方向 挺有意思，管理着项目的整个项目上游和下游，然后服务于 内部人员 和 外部人员 使用，感觉挺自豪的。下面就就跟着我来看看 如何 开发一个 聊天通讯 服务吧 ! (主要站在前端的角度来讲如何开发设计 )技术栈Vue 2.xWebsoketV原创 2021-09-16 14:20:21 · 5268 阅读 · 14 评论 -
Vue3 + TypeScript 开发实践总结
前言迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。在去年年末又把 TypeScript 重新学了一遍，为了上Vue3 的车，更好的开车。在上家公司4月份时，上级领导分配了一个内部的 党务系统开发 ，这个系统前端是由我一个人来开发，功能和需求也不怎么复杂的一个B 端 系统，直接上的 Vue3 + TypeScript + Element Plus 开发的，开发两周到最后的上线，期间也遇到很多小坑，很多无处可查，慢慢琢磨最后还是克服了。Vue3 + TypeScript Study一，.原创 2021-07-08 23:43:01 · 638 阅读 · 8 评论 -
Vue 组件通信的 8 种方式
前言 做了半年的公司系统，终于就在前天上线了。后期改BUG时间拖得太长了，出现的大部分BUG 是 前端 与后端 信息不对称导致的，逻辑性错误很不多，用户体验上稍微差点，毕竟第一次做这么大的系统(100w+)，通过这次系统的开发，总结了不少经验，如何更好的跟后端人员协作开发以及如何设计来提高用户体验上，之前自己做开发没关注这方面，只注重功能实现，后期的这块多补补。 项目上线后，接下来就是后期的维护更新了，最近时间终于不是.原创 2021-05-07 09:40:46 · 254 阅读 · 2 评论 -
Vue3项目中使用TypeScript
在单文件组件中使用 TypeScript，需要在 标签上加上 lang="ts" 的 attribute。当 lang="ts" 存在时，所有的模板内表达式都将享受到更严格的类型检查原创 2023-04-20 09:38:36 · 5128 阅读 · 2 评论 -
Vue中使用TypeScript：全面指南和最佳实践
Vue3和TypeScript，如何让它们成为你项目的黄金组合？在这篇文章中，我们将为你揭示整合Vue3和TypeScript的利益，以及如何通过这一强大组合提高开发效率和代码质量。跟随我们一起解锁Vue3和TypeScript的无限可能吧！"原创 2024-01-25 13:35:42 · 473 阅读 · 0 评论 -
探索Vue3：深入理解响应式语法糖
当使用基于类型的 props 的声明时，无法很方便地声明这些 prop 的默认值。为此我们提供了 withDefaults() 这个 API，但使用起来仍然很笨拙。name?: string,name : '海军' , phone : '123123123123' }) props . namename : '海军' , phone : '123123123123' }) props . name。原创 2024-01-17 10:00:35 · 100 阅读 · 0 评论 -
Vue3开发利器：超实用Npm Modules推荐与实战
在 Vue 3 项目中，使用自动导入的 npm 包可以显著提高开发效率。这些包通常帮助自动导入组件、API、插件等，减少手动导入的需要。原创 2024-01-25 13:56:51 · 126 阅读 · 0 评论 -
TypeScript 函数教程 - 深入理解和使用 TypeScript
介绍TypeScript函数的定义、调用和特性。本教程帮助你深入理解TypeScript函数，并通过实践增强编程技巧。原创 2024-01-17 10:09:29 · 186 阅读 · 0 评论 -
Vue路由守卫验证
最近在做一个大屏可视乎的项目，需要根据登陆用户的信息，进行显示一些列的数据。正常访问的话，你只要记住url，你就可以访问任何一个页面，一些重要的数据页面需要登陆才可以查看，不做路由守卫的话，可以查看。 没有一点安全性。现在要做的是必须登陆才可以查看需要登陆信息的相关页面，就要用到 Vue 路由守卫 来干了代码走你配置路由权限验证在 router 中，配置你要验证的路由, requireAuth 为 true 开启验证export const HomeRouter = { path:.原创 2020-06-11 12:01:19 · 431 阅读 · 0 评论 -
Vue3+TS+Vite 构建自动导入开发环境
这样我们就可以高效的开发Vue3项目了，无须自己手动导入组件和特性了。原创 2024-01-08 10:25:07 · 646 阅读 · 1 评论 -
Vue3插件开发教程：步步指导如何编写Vue3插件
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。原创 2024-01-08 10:20:56 · 507 阅读 · 0 评论 -
Vue3 使用 Teleport 封装 一个 Dialog
是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。简单的说，Teleport 可以把模板代码 传送到 其它组件中，原创 2024-01-05 19:44:53 · 1061 阅读 · 0 评论 -
深入理解Vue3中的watch与watchEffect的使用与区别
侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。原创 2024-01-05 19:41:56 · 1257 阅读 · 0 评论 -
element-ui el-input 验证只能输入数字和小数点
要在 Element UI 的 el-input 组件中使用正则表达式验证只能输入数字和小数点，可以通过监听 @input 事件，在事件处理函数中使用正则表达式进行验证。请注意，这只是一个简单的示例，仅限于验证输入的值是否为数字和小数点。上述代码中，我们在 el-input 组件上绑定了一个 @input 事件，并在事件处理函数 handleInput 中使用正则表达式 /该正则表达式表示只允许输入数字和小数点，其中 [0-9] 表示数字范围，. 表示小数点， 表示匹配零个或多个。原创 2023-07-03 09:31:38 · 1441 阅读 · 0 评论 -
Vue 自定义指令详解(看了就会)
el：指令所绑定的元素，可以用来直接操作 DOM。bindingname：指令名，不包括v-前缀。value中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如中，参数为"foo"。modifiers：一个包含修饰符的对象。中，修饰符对象为。vnode：Vue 编译生成的虚拟节点。移步VNode API来了解更多详情。原创 2022-11-05 16:39:28 · 365 阅读 · 0 评论 -
分享 6 个 Vue3 适合做外包项目的后台管理系统
VbenRuoYiflashGin-Vue-AdminAdmin-Pro-vue-admin-workSCUI。原创 2022-07-26 16:31:46 · 617 阅读 · 0 评论 -
Vuex 深入浅出(一看就会，一用就废)
Vuex 深入浅出随着你的业务需求不断增加，页面中的状态数据也不断庞大，维护起来就特别困难了，Vue 提供了一种状态管理 解决办法 -Vuex，它的思想和React 的Redux 很像，页面中的数据和逻辑都交给了store来管理了，这样的好处就是，维护方便，单个组件代码也整洁不少。安装npm install vuex --saveyarn add vuex// Vuex 依赖 Promise，所有需要安装 es6-promisenpm install es6-promise --原创 2020-08-11 09:29:15 · 320 阅读 · 0 评论 -
Vue+Echarts动态数据赋值
最近，在写公司大屏可视化项目，可视化与大屏 结合最好的就是echarts 了。 在Echarts的时候，数据不会始终是静态的，要结合实际项目出发，将动态数据 渲染到 图标上去。在 使用 Vue + Echarts 动态赋值时，遇到点小坑，数据渲染不上去，找了半天找到一个解决办法。如有更好的办法，可以下面留言或者发我邮箱 2466996532@qq.com解决思路先绑定Echarts 视图id然后进行 接口数据请求将 Echarts 配置项 option放到接口请求成功里，然后.原创 2020-06-02 10:55:12 · 6135 阅读 · 0 评论 -
Vue中Axios的封装管理
Axios 封装定义Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性支持Promise API拦截请求和响应转换请求数据和响应数据自动转换JSON数据客户端支持 XRSF回归正题在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用Axios变得尤为重要了。通常我们通过客户端向后端发送请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。同时，与接口打交道那么就会用到网络请求，与 Vue原创 2020-05-26 14:01:57 · 362 阅读 · 0 评论 -
Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.
Vue 运行时 + 编译器 vs. 只包含运行时 区别原创 2023-02-15 17:35:06 · 6672 阅读 · 1 评论 -
2020前端技术面试必备Vue：(一)基础快速学习篇
由于疫情的影响，相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员， 我们也面临着 ‘失业’,你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?1.大部分的回复: 求职平台都是 ‘已回复’，然后没有下文，你遇到了吗?2.各个公司对技术的要求增高3.有人说开始搞副业在我来看，这一年已经过去了四分之一，按往年最晚 2 月份 大家应该就开始工作了。现在已经三月中旬了，大概...原创 2020-03-31 12:11:54 · 359 阅读 · 0 评论 -
Vue中package.json详解
{ "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Manage", // 描述 "author": "LXG", // 作者 "private": true, //是否私人项目 "scripts": { "dev": "node bui...转载 2019-08-16 14:19:24 · 1874 阅读 · 0 评论 -
Vue子组件与父组件(看了就会)
最近这几天一直看Vue视频 ，看的黑马的视频，讲的特别杂，既有Vue基础知识，Webpack，VueUi框架…等等吧，很乱，学起来也特别费力，而且我还不知道，在视频后面的API也过期了（去了官方才知道），只能学到一半不能继续了，是不是特别坑！最近找了一套去哪儿网页APP，这个还讲的可以，今天可算把子组件父组件可搞明白了，以及子组件与父组件之间 的传值，还有零碎的知识点，做个总结，以便忘了，也希...原创 2018-12-08 12:41:13 · 10805 阅读 · 16 评论 -
Vue生命周期（看了就会）
Vue生命周期，自己做的一份总结，在生命周期里，created 和 mounted 最重要。created: 它是对数据的初始化的使用。mounted:它是组件的运行阶段，可以实现数据的更新，当内存中已经存在渲染过的数据，它发生改变时，通过虚拟DOM重新渲染最新改变后的数据。<!DOCTYPE html><html lang="en"><head&原创 2018-12-01 19:06:57 · 226 阅读 · 0 评论 -
Vue学习笔记
最近学习了Vue，Vue的出现简化 了很多代码步骤，Vue最强大的就是双向数据绑定。什么是Vue？Vue是一套用于构建用户界面的渐进式框架。它的核心是视图层，它在前端MVVM 中的角色是 VM .它是调度者，它分割了M和V。如果V（视图层）想要取数据，那么它会通过VM 到 M 层去取数据；存储数据，VM会将V层的数据存储到M层。VM是M层和V层沟通的桥梁Vue主要是以Vue内置命...原创 2018-11-25 00:18:43 · 357 阅读 · 0 评论