Vue.js
文章平均质量分 67
ifredom_
我常常以为,记忆是最容易模糊的东西,在时间的流逝里,人生如一轻烟般的淡去。
展开
-
Nuxt3 与 Vue3 的 Server api 全栈开发之路
阅读时长:15分钟本文内容: 国内关于Nuxt3的资料太少了,而Nuxt3又发布了没有多久,导致资料太少。本文浓缩讲解了,对于一个前端开发,上手使用 Nuxt3,并一个人承担前后端开发的所有须知内容。原创 2023-08-30 01:04:13 · 3443 阅读 · 4 评论 -
pm2部署nuxt3项目
使用pm2部署 Nuxt3 项目原创 2023-08-30 00:44:05 · 1390 阅读 · 3 评论 -
Vite3.0 发布
Vite是基于原生ESM模块的新一代开发与构建工具。原创 2022-07-15 14:55:47 · 748 阅读 · 0 评论 -
移动端适配
1. px2vw (推荐)安装postcss-px-to-viewportnpm install postcss-px-to-viewport --save-dev目录中新建postcss.configs.js 配置如下:module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 375, //视窗的宽度,对应我们设计稿的宽度,一般指re原创 2022-01-06 14:27:58 · 191 阅读 · 0 评论 -
vue 项目在 vscode 中的配置
vscode + eslint + prettier 配置配置目标:能够使用 alt + ctrl + f 对代码进行格式化,并配置 eslint 规则保持与 vscode 一致. 并且能够自动 import 包,自动删除 未使用的多余 import 语句。使用 vscode 格式化时真是头疼,prettier 和 eslint 的规则总吃撞车, 刚 ctrl+s 保存自动格式化,立刻又按照另一种规则给格式化了。好好研究了一番,发现代码规范实在不用那么复杂,因为目前网上流行的配置是 vue-elem原创 2021-03-31 02:14:03 · 1140 阅读 · 0 评论 -
vue2升级到vue3的全知详解(一)
本文主要讲解 Vue2 与 Vue3 的区别,帮助你在1小时内搞定Vue3使用.关于 Vue2中的 data,computed,mounted…都有对应详解和小例子.yarn install vue@3 vuex@4 vue-router@41. 核心:setup()setup的意义: 在 vue3 中多了一个钩子函数 setup(),它最大得作用就是让你对模块的逻辑进行细化提取,以便于让你的组件更为通用,更容易封装,从而减少代码量。setup() 是一个函数,首先需要把它当做一个普通的f.原创 2021-03-22 15:31:23 · 5802 阅读 · 1 评论 -
Vue3.0面试题
1. Vue 3.0 性能提升主要是通过哪几方面体现的?1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会原创 2021-03-01 13:46:51 · 1402 阅读 · 1 评论 -
axios 下载 excel
axios 下载方式有两种两种方法分别适用于不同的返回的数据格式, 通常也就这2种.方法一如果请求地址返回的数据是file文件格式,那么使用方法一,模拟浏览器下载文件 // 使用get方法下载 async handleExport() { const params = { hotelName: this.formData.hotelName, ...原创 2020-03-25 15:31:26 · 933 阅读 · 0 评论 -
阿里云OSS上传下载跨域问题
OSS文件传输使用OSS进行上传/下载操作时,时常会遇到跨域问题。其表现为,直接通过浏览器,可以直接访问已经存储在OSS中得文件地址并下载,但是通过代码却会报跨域问题.解决办法:登录阿里云OSS控制台,设置允许跨域.(图文详解在文尾)示例前端代码前端vue项目示例下载 const scoreXml = await axios.get(scoreUrl);上传<template> <upload-component @click="fnUplo原创 2020-05-11 16:33:55 · 7639 阅读 · 0 评论 -
vue开发PC端响应式项目
便于开发目的: 设计稿1920尺寸,达到响应式。如果设计稿上是75px,那么代码中也直接写上75px第一步,配置postcss-pxtorem安装# 安装$ yarn add postcss-pxtorem---# 在vue.config.js中配置css: { loaderOptions: { postcss: { plugins: [ ...原创 2019-06-25 11:13:03 · 8023 阅读 · 3 评论 -
axios 重复请求,快速点击
起因一个项目使用的是axios,遇到了用户短时间内,快速点击提交按钮,导致触发了多次请求,提交了多条记录。解决办法import axios from "axios";import md5 from "js-md5";import { Message} from "element-ui";import router from "../router";import { gene...原创 2019-01-30 13:58:06 · 2917 阅读 · 0 评论 -
vue-cli开发时,ajax跨域详细解决办法
目的:使用vue-cli构建的项目,在开发时,想要要访问后台接口获取数据,这时就会出现跨域问题。在config/index中进行如下配置【即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址】 '/api': { //匹配所有以/api开始的路径 target: 'http://example.com', changeOr原创 2017-05-12 10:35:27 · 13304 阅读 · 0 评论 -
20分钟彻底明白vue
初学vue时,使用script引入初学vue时,使用script引入该框架,那么很好,基本的语法过一遍,这不是什么难事。这里通常不明白的是vue的核心思想--数据驱动。一句话比较瞬间明白:传统jquery操作: html源文件 --> 浏览器解析 --> 渲染为最终呈现页面vue数据绑定: html源文件 ---> vue拦截,通过算法计算 --> 浏览器解析 --> 渲染为最原创 2017-09-13 10:57:16 · 1299 阅读 · 0 评论 -
vscode - 创建vue模板
第一步: 新建模板并保存文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存第二步: 添加配置,让vscode允许自定义的代码片段提示出来文件 --> 首选项 --> 设置 ---> 添加这2项// 在其他建议上方显示代码片段建议。"editor.s...原创 2017-07-26 10:28:40 · 29669 阅读 · 6 评论 -
vue界面测试框架storybook
Vue UI测试框架storybookstorybook是什么?react开发者可能对这个比较熟悉了,即使用storybook的方式创建react组件,并且立即可测.这使组件的性能以及可用性得到了测试保障。而对于vue开发者,传统的开发方式是 (前端开发/后端开发)–联调–测试。其中测试包括了白盒测试、黑盒测试。其中黑盒测试常常就是测试功能的可能性,效率比较低下,且组件可扩展性原创 2018-02-02 13:34:16 · 5151 阅读 · 0 评论 -
Vue-hooks(钩子)
vue-hooks最近尤大发布了一个最新的npm包:vue-hooks 。既喜且优,真是一个悲伤的故事。这个npm包是关于hook(钩子)一个最新思路的探索,也是react团队前不久的首创…hooks 是什么Hook是react中得一项新功能提案,可以让开发人员在不编写Class的情况下使用状态和其他React功能。// react版本import { useState } from...原创 2018-11-05 15:35:28 · 19030 阅读 · 2 评论 -
vue开发时的小技巧
一、善用watch的immediate属性例如:需要初始化某个http请求,并且在其他其他属性变化时,触发这个initFetchSearch请求,很多人这么写:created(){ this.initFetchSearch()},watch: { searchInputValue(){ this.initFetchSearch() }}上面的这种写法可以简写如下:...转载 2018-11-28 13:56:07 · 771 阅读 · 1 评论 -
element-ui 表单渲染v-if组件,验证报错
问题描述使用elementui的form表单组件,如果其中几个表单项使用了v-if进行UI切换,并且默认v-if="false"不可见,切换的元素又是必填项时,那么在验证的时候,就会出现很奇怪的bug。原因:elementui在对form表单中带有prop属性的子组件进行校验规则绑定时,是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的,导致了v-if内的表单项,...原创 2018-12-21 09:52:33 · 24299 阅读 · 1 评论 -
vue-cli3内存溢出,JavaScript heap out of memory
起因本地一个项目是使用vue-cli2构建的,遭遇了运行npm run dev出现过因为模块过多,无法运行的问题。这一次是为了升级到vue-cli3体验一下。解决办法vue-cli2的解决办法是:npm run dev和npm run build都可以直接在前面加上option参数。vue-cli3的解决办法是:yarn serve修改为&amp;quot;serve&amp;quot;: &amp;quot;vue-cli-...原创 2019-01-11 16:26:23 · 41113 阅读 · 29 评论 -
2018年最流行JavaScript明星项目
提要文章通过对比各项目过去12个月在GitHub上新增明星数量,来评估其在2018年度的受关注程度,进而选出2018年度JavaScript领域崛起的明星项目。下列图表对比了各个项目在Github上于过去12个月新增的星数量。分析的数据来源为最好的JavaScript网站,一个WEB领域优秀项目的精选网站。通过点击项目,可以查看更多信息。年度最受欢迎项目排名可喜可乐,作为 Vue的忠实粉...原创 2019-01-10 10:36:08 · 630 阅读 · 0 评论 -
vue热替换失效根本原因
新手刚开始使用vue时,常会遇见一个坑,那就是热替换失效。什么?你跟我说使用官方的vue-cli去构建,我就是使用vue-cli后突然失效。什么?你跟我说重新npm run dev一下,好嘛,已经run了N次了依然没回到大路上。经过在网上一番查找,发现基本没有这个问题的详解,可能是这个问题太低级了?讲解一下热替换的原理:热替换是在npm run dev时启动的一个服务器(w原创 2017-03-23 14:24:25 · 32734 阅读 · 9 评论