草庐IT

Vue-Router

全部标签

答应我,在vue中不要滥用watch好吗?

前言上周五晚上8点,开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求,并且维护这一块业务的同事已经下班走了,所以只有我来做。虽然内心一万头草泥马在狂奔,但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉,加上还饿着肚子,在梳理代码逻辑的时候我差点崩溃了。需要修改的那个vue文件有几千行代码,迭代业务对应的ref变量有10多个watch。我光是梳理这些watch的逻辑就搞了很久,然后小心翼翼的在原有代码上面加上新的业务逻辑,不敢去修改原有逻辑(担心搞出线上bug背锅)。滥用watch带来的问题首先我们来看一个例子:{{dataList}}import{ref,

【前端】Vue之使用new Blob() 实现不同类型的文件下载

       在Vue项目实际开发过程中,经常需要对各种各样的类型进行下载,因为我不是前端出生,就自己在网上学习最后使用到自己的项目当中,代码冗余等低级错误还请多多指导。我发现用Blob二进制进行文件下载的比较多,我就采用了这一方式。        下面是一份Blob的配置关系对应表,在我们使用Blob做下载功能时,根据需要下载的文件类型修改type值进行下载即可。文件后缀名、文件类型、mimeType值对应关系表后缀名        文件类型类型(type).xlsMicrosoftExcelapplication/vnd.ms-excel.xlsxMicrosoftExcel(OpenXM

Vue2问题:分享一个通用多文件类型预览库

1.需求分析当我们在做文件预览功能时,往往会遇到一种糟糕的情况。就是每预览一种类型的文件,就需要重新安装、配置、编写一个新的库来实现,很麻烦,也很繁琐。于是,我寻找了一个可以通用的预览库,来处理这个问题。vue-office,一个支持多种文件docx、excel、pdf预览的vue组件库,作者hit757。这个库不仅能支持vue2/3,也支持非Vue框架的预览使用。先看一下线上演示效果,如果实现效果与项目使用不符,为节约朋友们时间,可自行选择是否向下阅读。演示地址:https://501351981.github.io/vue-office/examples/dist/#/docx。如果朋友们

【unibest】 uniapp + vue3 模板 UI 框架选型

背景unibest作为最好的uniapp开发模板,那UI框架的选择也是要仔细斟酌的。unibest作为uniapp+vue3+ts的项目,自然也要选择满足vue3的UI库,所以像vue2时代的uview就不考虑在内了。但是在uview的基础上衍生出来的支持vue3的uview系的ui框架还有不少,而且热度很高。再来说说官方维护的uni-ui,支持全端,而且有类型提示,目前已经内置到unibest了,如果用户确实用不到里面的组件也可以删除,减少包体积。TIPS:uni-ui本身是js开发的,但是官方提供了完备的类型提示(by@uni-helper/uni-ui-types)所以看起来就像是ts开

VUE(uni-app框架)开发微信小程序①-搭建脚手架

一,脚手架搭建前提:搭建脚手架的前提是需要装node.js,因为需要用到npm。下载官网:下载|Node.js中文网(nodejs.cn)根据自己需要下载一个适合自己的版本,然后点击安装,安装完成后在命令提示窗口输入node-v如果有版本信息就说明安装成功了 接下来:1.全局安装:npminstall-g@vue/cli2.创建项目(项目名暂时为demo):vuecreate-pdcloudio/uni-preset-vuedemo3.启动项目(微信小程序): ①:cd转到demo文件夹下 ②:npmrundev:mp-weixin 4.导入项目:  打开微信小程序开发者工具,导入路径指向..

前端vue集成echarts图形报表样例

文章目录🐒个人主页🏅Vue项目常用组件模板仓库📖前言:🐕1.在项目终端下载echarts依赖包🏨2.在main.js中导入echarts资源包并使用🎀3.在.vue文件中直接使用echarts,下面是一个样例,🐒个人主页🏅Vue项目常用组件模板仓库📖前言:本篇博客主要介绍前端vue项目中如何去集成echarts图形报表,需要的朋友请自取🐕1.在项目终端下载echarts依赖包npminstallecharts🏨2.在main.js中导入echarts资源包并使用import*asechartsfrom'echarts';Vue.prototype.$echarts=echarts;🎀3.在.v

Vue3:基础入门

Vue3:基础入门Date:April10,2023Sum:vue简介、vue的基本使用、vue的指令与过滤器、品牌列表案例目标:能够知道vue的基本使用步骤掌握插值表达式和v-bind指令的用法能够掌握如何使用v-on指令绑定事件能够使用v-model指令实现数据的双向绑定能够使用v-if和v-else指令实现条件渲染能够使用v-for指令实现列表数据的循环渲染vue简介1.什么是vue官方给出的概念:Vue(读音/vjuː/,类似于view)是一套用于构建用户界面的前端框架。1.1解读核心关键词:构建用户界面前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观、舒适、

vue项目本地开发完成后部署到服务器后报404是什么原因呢?

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可//scp上传user为主机登录用户,host为主机外网ip,xx为web容器静态资源路径scpdist.zipuser@host:/xx/xx/xx让web容器跑起来,以nginx为例server{listen80;server_namewww.xxx.com;location/{index/data/dist

laravel - Vue 路由器历史模式结合 laravel catch all 重定向 404 header 给出 200 header 状态码

我在Laravel后端有一个Vue项目,SEO对其很重要。使用我当前的设置,我将所有传入请求重定向到我的Vue应用程序。在我的Vue应用程序中,我使用VueRouter处理路由。在我的设置中,无法识别的页面被定向到我喜欢的组件(404组件),但浏览器获得200状态代码。我的问题是:如何为浏览器提供正确的404状态代码?我的代码摘要:从Laravel(web.php文件)中将所有内容重定向到我的Vue应用程序:Route::get('/{catchall?}',function(){returnview('app');})->where('catchall','.*');在我的Vue路由

vue.js - Vue SPA - PhantomJS 成功运行,但 Fetch As Google 显示空白

我的团队使用Vue构建了一个SPA(https://tutorismhk.com/)。在进行SEO时,我们发现FetchAsGoogle无法呈现页面(在预览中显示空白页面)。没有显示错误消息。我们已经使用PhantomJSv2.1.1进行了测试-使用它从我们的本地计算机呈现上述URL并将屏幕捕捉到图像中。它运作良好。关于我们如何调试它的任何想法? 最佳答案 经过反复试验,我们找到了解决方法。我们的应用程序存在两个问题。我们手动安装了最新的babel-polyfill。我猜它会导致一些不兼容的问题。似乎在将@vue/cli-plugi