随笔分类 - Vue
摘要:gzip 是 GNUzip 的缩写,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apach
阅读全文
摘要:注:本篇博客借鉴了https://segmentfault.com/a/1190000022758406 目录结构: http-helper.ts import axios, {CancelTokenSource, AxiosResponse, AxiosRequestConfig, AxiosEr
阅读全文
摘要:前端开发过程中,我们会遇到多环境调试、插件调用和多个代理、跨域问题等情况,下面我们来配置下,不同的环境下,统一的跨域问题解决,提高开发效率。 1、根目录下新建三个环境的配置文件,分别命名为: .env.development .env.test .evn.production 注意env前有英文的句
阅读全文
摘要:前言 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 本文基于的源码版本是 vue-next-router alpha.10,为了与 Vue 2.0 中的 Vue Router 区分,下文将 vue-router v3.1
阅读全文
摘要:以前做移动端适配时,基本上都是采用rem方案,现在发现了一个新的方案,就是使用viewport单位,现在viewport单位越来越受到众多浏览器的支持。 开发移动端项目时,可以使用postcss-px-to-viewport,将px单位自动转换成viewport单位,用起来超级简单。 安装 npm
阅读全文
摘要:在项目根目录创建 tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "modul
阅读全文
摘要:在Vue项目中的src目录下新建axios.d.ts文件并键入以下代码,并重新编译运行。 import * as axios from 'axios' declare module 'axios' { interface AxiosInstance { (config: AxiosRequestCo
阅读全文
摘要:安卓机可以正常使用扫一扫,ios会出现以下错误 {"errMsg":"config:invalid signature"},表示signature授权签名无效。 原因:一般获取signature授权签名需要取得当前调用wx.config页面的url,IOS的微信内置浏览器,验证签名,单页应用的路由是
阅读全文
摘要:首先下载并安装ts-import-plugin npm i -D ts-import-plugin 然后在vue.config.js中引入并配置 const merge = require("webpack-merge"); const tsImportPluginFactory = require
阅读全文
摘要:在做vue+typescript开发过程,给window对象添加属性并赋值,却发现报错,如类型“Window & typeof globalThis”上不存在属性“gspZc”。 原则上,TypeScript 需要开发者做到先声明后使用。这就导致开发者在调用很多原生接口(浏览器、Node.js)或者
阅读全文
摘要:当前最新版本:vue-devtools 6.0.0-beta 20 用这个版本主要是为了支持vue3 推荐直接下载 https://www.crx4chrome.com/crx/107268/
阅读全文
摘要:对于Message提示框不要全局引入。全局引入会导致整个vendor-chunk都会很大,影响首次加载的速度。应该优雅一些,在组件内引入最为合适。
阅读全文
摘要:
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优
阅读全文

摘要:
<a-modal v-model="addressVisiable" :footer="false" width="800px" :bodyStyle="{ height: '400px' }" :afterClose="afterClose" > <a-tabs v-model="activeKe
阅读全文

摘要:
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父
阅读全文

摘要:
用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。 原始方法 location.reload() 路由跳转 this.$router.go(0) 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。 <template> <div id="app">
阅读全文
