Vue.js
文章平均质量分 60
vue框架集
江一铭
江一铭,字咏之,号逍遥居士。读书人,爱文学,软件工程理工男,IP浙江在职,从业五年。主攻前端方向技术研发,副攻Unity 3D、IOS客户端、Python人工智能等。2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等。
展开
-
封装一个类似微信通讯录带有字母检索功能的vue组件
这里我们直接使用方法该方法将调用它的元素滚动到浏览器窗口的可见区域。原创 2023-07-05 10:42:02 · 3007 阅读 · 1 评论 -
js生成年月+字母+五位数的编码,实现字母递增与五位数序号递增
这块儿的逻辑有问题,只能算到B。C就不行了。也就是说AB两个字母都可以算满,99999x2 大概20w的数据,嗯,短时间内肯定是发现不了,本来想用取余算的。算了,早就不想干了,20w的数据,不得添加好几年??我早就走了,给后人留个坑吧,奈斯!!拜拜!!原创 2022-09-02 18:13:12 · 3206 阅读 · 2 评论 -
vue+express生成token
在使用vue+node开发的过程中,在写登录时候我们会使用到token验证,下面我来分享一下express生成token和简单的使用,希望对你有所帮助。原创 2022-06-17 10:45:28 · 1119 阅读 · 0 评论 -
vue项目使用qrcode插件生成二维码
下载导入使用清除或者你还可以这么写原创 2022-06-09 19:19:02 · 1923 阅读 · 0 评论 -
前端Vue监听路由变化, 点击页面内按钮跳转菜单更改导航菜单选中状态
实际项目开发中有时候需要根据路由的变化去实进行一些操作,在此,我总结了三种方法。1、watch监听// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},或者// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听.原创 2022-05-09 12:29:58 · 4513 阅读 · 2 评论 -
前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制XDOC文档预览服务接口简单,只需要传入文档地址XDOC文档预览云服务:https://view.xdocin.com/.看看XDOC如何做Word文档预览: https://view..原创 2022-03-22 10:37:42 · 12957 阅读 · 15 评论 -
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
个人博客:前端江太公前言antd 对树形控件目录进行增删改查最近在用Ant Design写一个后台,遇到的需求就是实现一个可动态增减和编辑子节点的Tree。实现的效果如下:可以增加父子节点可以删除子节点可以编辑子节点信息可以取消编辑信息具体的效果图如下:直接上代码vue组件<a-row :gutter="24"><!-- 新增一级目录 --> <a-col :md="6" :sm="8" style="display:flex.原创 2022-03-18 18:55:03 · 4307 阅读 · 7 评论 -
前端VUE【实战】—— mixin混入用法总结
个人博客:前端江太公前言混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。一、组件和混入的区别单纯组件引用: 父组件 + 子组件 >>> 父组件 + 子组件mixins: 父组件 + 子组件 >>> new父组件二、混入 (mixin)的作用多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin.原创 2022-03-18 18:21:42 · 2394 阅读 · 0 评论 -
vue_SSR框架:搭好的Vue服务器渲染框架,用vue做网站开发、做seo的首选。
vue_SSR框架:搭好的Vue服务器渲染框架,用vue做网站开发、做seo的首选。原创 2022-03-15 16:46:53 · 5574 阅读 · 4 评论 -
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
文章目录♈️.env 文件配置1️⃣ 文件说明2️⃣ 内容格式3️⃣ 加载4️⃣ 优先级5️⃣ 项目中的使用💬 总结☀️ 文章推荐♈️.env 文件配置1️⃣ 文件说明 .env:全局默认配置文件,无论什么环境都会加载合并。 .env.development:开发环境的配置文件 .env.production:生产环境的配置文件 注意:三个文件的文件名必须按上面方式命名,不能乱起名,否则读取不到文件。 2️⃣ 内容格式 注意:属性名必须以 VUE_APP_ 开头,.原创 2022-03-03 09:49:11 · 9004 阅读 · 7 评论 -
Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法一、正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载 downFile() { if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a') elink.href = imgView + 'group1/M00/00/88/FG原创 2022-02-18 11:59:33 · 6379 阅读 · 1 评论 -
vue 图片转base64格式方法总结
直入主题,上代码(其实用的还是FileReader)主要方法handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw); // 一定要传入file格式 reader.onload = () => { console.log("file 转 base64结原创 2022-02-11 15:21:59 · 8043 阅读 · 2 评论 -
javascript函数防抖节流,适用于搜索多次触发请求等场景。
使用节流防抖函数(性能优化) 那么在 vue 中怎么使用呢: 在公共方法中(如 untils.js 中),加入函数防抖和节流方法 // 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arg...原创 2022-01-26 15:55:14 · 1208 阅读 · 0 评论 -
前端des加密信息
idnumberDes.js 加解密封装需要先安装 CryptoJS npm i crypto-jsimport CryptoJS from "crypto-js";// des加密,isHex表示结果是否有密文,输出hex,否则输出base64// key为加密的秘钥。message 为需要加密的信息let encryptByDES = function (message, key, isHex = true) { var keyHex = CryptoJS.enc.Utf8.par原创 2021-12-24 10:43:53 · 1884 阅读 · 0 评论 -
前端代码开发规范总结
目录 前端代码规范一.编程规约(一) 命名规范1.1.1 项目命名1.1.2 目录命名1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名1.1.4 命名严谨性 (二) HTML 规范 (Vue Template 同样适用)1.2.1 HTML 类型1.2.2 缩进1.2.3 分块注释1.2.4 语义化标签1.2.5 引号 (三) CSS 规范1.3.1 命名1.3.2 选择器1) css 选择器中避免使...原创 2021-11-15 14:26:50 · 1433 阅读 · 0 评论 -
最新前端Vue代码风格指南大全
一、命名规范市面上常用的命名规范:camelCase(小驼峰式命名法 —— 首字母小写)PascalCase(大驼峰式命名法 —— 首字母大写)kebab-case(短横线连接式)Snake(下划线连接式)1.1 项目文件命名1.1.1 项目名全部采用小写方式, 以短横线分隔。例:my-project-name。1.1.2 目录名参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。my-project原创 2021-11-15 09:09:24 · 1088 阅读 · 0 评论 -
vue混入(mixins)的使用方法和注意点
mixins基础概况vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。怎么用?举个栗子:定义一个混入对象把混入对象混入到当前的组件中用法似不似相当简单呀mixins的特点1 方法和参数在各组件中不共享混合对象中的参数num组件1中的参数num进行+1的操作组件2中的参数num未进原创 2021-11-08 08:54:54 · 1263 阅读 · 0 评论 -
前端vue项目,把某个div盒子或当前页面生成pdf文件并下载。
安装依赖1. npm install --save html2canvas // 作用是html转图片2. npm install jspdf --save // 再将图片转为pdf目录标题安装依赖一、全局方法 (无论哪个页面都可调用)二、局部方法一、全局方法 (无论哪个页面都可调用)1、新建一个htmlToPdf.js文件,拷入以下代码import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export de原创 2021-10-29 14:53:37 · 2164 阅读 · 0 评论 -
vue插件vue-particles,粒子动画特效背景,收藏起来,避免找不到!!!
上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动。一直中意这种动态插件,今天有时间,迫不及待试了一波~安装插件npm install vue-particles --save-dev在main.js文件中全局引入import VueParticles from 'vue-particles' Vue.use(VueParticles)在vue文件中使用 <vue-particles col.原创 2021-10-26 14:22:33 · 3133 阅读 · 6 评论 -
vue2.0报错:Syntax Error: TypeError: eslint.CLIEngine is not a constructor
【解决】 ERROR Failed to compile with 1 error Syntax Error: TypeError: eslint.CLIEngine is not a constructor You may use special comments to disable some warnings. Use // eslint-disable-next-line to igno...原创 2021-10-20 10:05:30 · 8173 阅读 · 1 评论 -
使用vs code自动生成vue2.0初始化模板
打开vscode, 文件-首选项-用户代码片段,选择代码片段文件或创建代码片段,选择或新建vue.json复制以下代码,保存{ "Print to console": { "prefix": "vue2.0", "body": [ "<!--", " 功能:${1:初始化功能描述}", " 作者:zichen-jiang", " 邮箱:18307106535@163.com", " 时间:$CURRENT_YEAR年$CURRENT_MONTH月$C原创 2021-10-19 15:25:30 · 1142 阅读 · 0 评论 -
vue npm run build打包报错:Class extends value undefined is not a constructor or null
解决方案:npm install --save-dev mini-css-extract-plugin 即可原创 2021-09-16 21:19:58 · 1541 阅读 · 0 评论 -
前端学习资料整理
前端思维导图js变量js运算符js数组js流程语句js字符串函数js函数基础jsdom操作js正则表达式js数据类型 前端技术点总结:基础篇布局、自适应布局webpack、gulp了解的程度,平时怎么使用的,常用的属性css3动画padding 和 margin 的百分比是按照父元素的宽度来计算的(其实是看word-model,文字横向或竖向设置);git的使用情况 git checkout -b dev origin/dev.原创 2021-08-25 16:33:01 · 2586 阅读 · 0 评论 -
Vue.js 作者尤雨溪:直接学 Vue 3 吧
《程序员》于 2000 年创刊,其理念为技术改变世界,创新驱动中国。2021 年,《新程序员》 全新起航,首期以「开发者的黄金十年」为主题,以音视频、图文专栏等丰富的多媒体形式为载体,立足当下,放眼未来,为读者带来全方位的技术和产业解读。 本文为《新程序员》第一期内容,在 UNIX 开发者 Brian W. Kernighan 之后,我们采访到 Vue.js 的作者尤雨溪,与其共谈精彩程序人生、共论顶级开源项目的成功之道。 ...原创 2021-08-23 10:10:18 · 2286 阅读 · 1 评论 -
Vite实战:Vite快速搭建Vue3.0项目
Holle,大家好,最近发现Vue3.0版本都正式发布,然后去学习了一下,发现确实有很多和Vue2.0不一样的东西,下面呢,是Vue3.0推出的一个快速创建项目的管理工具——Vite!全局安装npm install -g create-vite-app进入想要创建项目的目录下新建create-vite-app yourProjectName进入新建的项目下安装相关依赖并运行到这步项目就创建完成了,有没有发现创建项目特别快,比webpack快很多,当然啦,项目里后期需要什么东西需要自己在.原创 2021-08-19 09:19:32 · 1179 阅读 · 0 评论 -
Vite2.0搭建Vue3.0项目应用实战
前言 最近Vite2.0很火热,说是要替代webpack作为下一代前端构建工具。上个周末搬完房子仔细研究了一下,照着我们目前的项目环境,尝试搭建了一套基础环境,简单了解了Vite2.0的配置,以及各种库的集成。这里对Vite2.0不做过多的介绍,主要优点就是快,快,快。 环境配置 一条命令创建一个空的vite项目 npm init @vitejs/app vite-project 在终端,输入以上命令,会让你选择模板。 看文章标题我们就...原创 2021-08-19 09:09:19 · 1256 阅读 · 3 评论 -
为什么Vue在国际上越来越没影响力?
近日突然看到“为什么Vue在国际上越来越没影响力”这样一个问题我来回答一下如果Vue 单纯看 star 数量的话,确实比 React 多啊说实话,Vue 实际上策略是紧跟 React,我们组内部讨论的时候,一般把 Vue 看作是全工具链的 React 框架,无论是老版本还是新版本Vue 和 React 的原理性差异几乎没有,这点和 ng 不同,因为在开发 ng 的时候,编程思维都需要彻底转变才能进行所以,你对 Vue 和 React 的比较,可能完全没有意义,因为绝大多数有能力的开发者,Vue R原创 2021-08-12 14:40:04 · 2785 阅读 · 0 评论 -
vue项目:背景颜色、下划线从左到右渐变动画效果
今天莎b产品提了一个需求,让我写一个阿里云的切换动画效果。本来我很不情愿的,但是他说ui妹子下班请我吃饭,我就勉为其难的答应了。先来看看阿里云的效果:鼠标放上去的时候切换table,下面的线条有过渡效果。这个莎x产品还非说改成点击效果。ctm的。再来看看我的demo效果:话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met.原创 2021-08-11 17:55:48 · 2097 阅读 · 1 评论 -
前端工程化-自动生成vue页面
前言我们的项目是基于vue-cli搭建的,每次需要新加一个页面需要操作以下步骤:在views文件夹下面新建一个文件夹,用来存放新页面的.vue文件。需要在routes.js文件里面新添加一个路由。按照上述操作以后,才可以正常访问新添加的页面,之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我们甚至可以一键生成页面,包括从后端请求数据等操作。自动生成页面我们可以按照模板的方式生成想要的页面,我这里说两种页面,一种是什么都没有的原创 2021-07-15 15:10:42 · 5845 阅读 · 1 评论 -
支付宝前端的代码结构及性能优化大总结
目录 1、前端结构组织与文件命名规范HTML 命名规范CSS 命名规范JavaScript 命名规范 2、 代码及性能优化1. HTML 代码优化2. SEO优化3. CSS优化4. server服务端优化5. JavaScript方面优化6.Webpack优化7. 加载优化:8. 页面渲染优化9. 图片优化10. 脚本优化 3、前端资源优化 1、前端结构组织与文件命名规范 前端结构组织具有如下原则: 同一项目...原创 2021-07-13 15:15:58 · 952 阅读 · 0 评论 -
vue在headers中带入token:解决401
js export function 函数名(params) { return axios({ url: api.函数名, data: params, params: params, headers: { 'Authorization': 'Bearer ' + params.token } })} 单页面 ...原创 2021-07-07 16:17:44 · 1152 阅读 · 0 评论 -
解决跨域问题:给谷歌设置允许跨域
在Chrome的快捷图标上点击鼠标右键(如果没快捷方式,可以找到文件路劲,发送快捷方式到桌面) 选择“属性” / 除了右键选择属性的方式查看之外,还可以按住alt双击图标,直接打开属性面板 选择快捷方式标签 在“目标”里面,在原chrome路径的基础上加上 --disable-web-security --user-data-dir=C:\chromedata //注意...原创 2021-07-07 15:27:43 · 1243 阅读 · 0 评论 -
详细讲解axios封装与api接口封装管理
一、前言 axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库 二、ax...原创 2021-07-07 11:13:44 · 1303 阅读 · 4 评论 -
vue项目打包:修改dist文件名
vue.config.js// 输出文件目录(默认dist) outputDir: 'web',const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { // 基本路径 publicPath: './', // 输出文件目录(默认dist) outputDir: 'web', // 关闭eslint验证 lintOnSave: false,原创 2021-07-07 11:03:28 · 2272 阅读 · 0 评论 -
vite_Vue 3全新的Web开发构建工具——Vite介绍
Vite是Vue的作者尤雨溪开发的Web开发构建工具,它是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用浏览器去解析import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用。同时不仅对Vue文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。 Vite具有以下特点: 快速的冷启动即时热模块更新(HMR,...原创 2021-06-24 15:40:12 · 990 阅读 · 0 评论 -
金格WebOffice2015-----vue项目
下载 官网地址:http://www.goldgrid.com/jinge_download/index.aspx?num=5 解压后的文件 js文件中有两个重要的js文件iWebOffice2015.js和WebOffice.jsWebOffice.js是WebOffice2015对象的一些方法。iWebOffice2015.js是根据不同的浏览器环境来渲染<object> 安装插件 安装iWebOfiice2...原创 2021-06-23 17:15:20 · 2669 阅读 · 2 评论 -
浅谈一下如何避免用户多次点击造成的多次请求
一、有效地在web客户端采用一定机制去防止重复点击提交,将大大减轻服务器端压力 浅谈一下如何避免用户多次点击造成的多次请求一、有效地在web客户端采用一定机制去防止重复点击提交,将大大减轻服务器端压力。1> 定义标志位: 点击触发请求后,标志位为false量;请求(或者包括请求后具体的业务流程处理)后,标志位为true量。通过标志位来判断用户点击是否具备应有的响应。2> 卸载及重载绑定事件:点击触发请求后,卸载点击事件...原创 2021-06-17 21:13:58 · 1499 阅读 · 2 评论 -
node:内存溢出(报错:CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足)
描述:项目运行npm run dev 运行一定次数(我这里只能保存一次,第二次保存就报错,需要重新运行npm run dev,很耗费时间)后报错报错:CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory翻译:CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足进过各种搜索,找到关于问题的解决方法—node内存溢出解决方法:CMD,进入命令行复制粘贴命令:setx NODE_OPTION原创 2021-06-07 10:53:27 · 2251 阅读 · 2 评论 -
vue三元运算之多重条件判断(多个枚举值转译)
直接上代码:div class="msgLi"> <p>组织设置:</p> <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.partySetup=="3"?"更名":organInfo.partySetup }}</p></div>原创 2021-05-20 09:34:11 · 3006 阅读 · 0 评论 -
vue再次进入页面不会再次调用接口请求
在vue实际项目中,很多时候会在mounted或者created请求数据接口然后渲染到页面上,但是这两个生命周期都是只会在第一次进入页面后执行,再次进入该页面时,由于vue-router的机制,会缓存已经加载过的页面数据这样会大大提高效率,所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据,跳转到这个页面,修改的数据并没有变化。 实际例子:a页面展示了一组数据,需要跳到另一个页面修改...原创 2021-05-17 20:53:47 · 4397 阅读 · 1 评论