1.vue自定义插件的作用插件通常是用来为Vue添加全局功能。插件的范围没有严格的限制。——一般有下面几种：添加全局方法或者 property。如：vue-custom-element添加全局资源：指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 AP
本文的主要内容如下：介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面 本文11个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！ Git
最近想要做一些vue的插件练一下手，于是现在需要解决的问题有两个。一个是怎么写vue的插件，一个是写完后怎么上传npm。一、如何写一个vue插件首先在进行插件创作的时候，先建立一个普通的vue项目进行编写。vue create vue-button-z然后创建plugins文件夹，和plugins下的lib文件夹，在lib文件夹下写你的插件代码1.插件代码编写这是button.vue 文件示例，就
最近为移动端使用rem雪碧图小图标自适应困扰，想了半天终于找到解决方案！难点在于雪碧图要跟随屏幕缩小，下面我们进入正题！ 大家先要明白rem是什么，我给大家个新的理解，rem的本质就是百分比转换，不明白的童鞋可以具体去恶补下rem相关知识！既然rem的本质是百分比转换，那么我们也可以通过同样的方法转换雪碧图，下面上案例！  
前言因为移动端设备屏幕尺寸非常多，碎片化严重。为了兼容市面上的不同手机，我们要给我们的项目中去进行响应式布局。rem适配方案原生rem写法注意： 1rem 的大小 = 根元素html的font-size的字体大小<script>
// 页面重置事件
get()
window.onresize = function() {
get()
}
customRef 返回一个ref对象,可以显式地控制依赖追踪和触发响应示例<template>
<div>
<p>{{obj}}</p>
<button @click="inc">button</button>
</div>
</template>
<
转载
2024-10-22 13:24:54
151阅读
作者：月夕 演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，如果某个优化只适用于 Vue3 或者 Vue2，我会在标题中标出来。一、代码优化v-for 中使用 key使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则
Vue生态系统中有一个名为Vite的新构建工具，它的开发服务器比Vue CLI快10-100倍。这是否意味着Vue CLI已经过时了?在本文中，我将比较这两种构建工具，并说明它们的优缺点，以便你可以决定哪一种适合你的下一个项目。Vue CLI概述大多数Vue开发人员都知道，Vue CLI是使用标准构建工具和最佳实践配置快速建立基于Vue的项目的不可或缺的工具。其主要功能包括：工程脚手架带热模块重载
一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的<Model v-show="isShow" />
<Model v-if="isShow" />当表达式为true的时候，都会占据页面的位置当表达式都为false时，都不会占据页面位置二、v-show与
Situation需求 项目中的一种题目 计算题需要配置特定运行指令，计算题的编辑和新增是同一个页面 基本信息提交、配置指令提交和配置文件上传各是一个接口，一共涉及3个接口 指令提交和文件上传均需要questionId，因此我们设计 第一页进行题目基本信息提交，请求成功后后端返回questionId，我们拿到questionId后 下一步 跳转至 第二页，进行指令的配置 问题 编辑计算题时，第一页
转载
2024-05-17 17:50:20
77阅读
theme: fancy一. Ref 用法这是 ref 最基本的用法，返回来的count是一个响应式的代理值const count = ref(0)二. 实现1. ref 函数我们调用的ref函数，传进来一个 val 值，调用 createRef 函数，我们来看下该函数的实现源码路径：packages/reactivity/src/ref.ts
function ref(value?: unkno
文章目录使用感受响应式Vue3对比Vue2的变化reactive 源码实现使用感受proxy引入Proxy、Reflect完善边界情况 使用感受响应式在源码开始前，我们来尝试写个demo，使用一下 Reactive & effect<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=
Vue-cli 3安装及使用vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法全局变量的使用vue-cli3.0独立运行.vue文件vue项目管理器vue-cli3.0配置基础的路径 vue-cli安装使用下面的命令安装vue-cli3npm install -g @vue/cli
# OR
yarn global add @vue/cli安装完成，检查vue版
转载
2024-10-13 15:44:56
34阅读
新版的Vue中最重要的一些特性有：性能得到了显著的提升；Composition API；一个组件可以支持多个根元素；Tree shaking，当一些功能不用的时候就不会打包到最终的代码里；新的组件：Fragment、Teleport、Suspense；其中性能提升主要体现在：更新比vue2有1.3～2倍的提升、SSR有2～3倍的提升。做一个验证创建一个vue2项目和一个vue3项目, 分别加载有1
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
转载
2024-04-07 13:07:12
635阅读
vue3.0 上手体验 vue3.0 beta 版本已经发布有一阵子了，是时候上手体验一波了～注意，本文所有演示都是基于 vue3.0 beta 版本，不保证后续正式版 api 不改动。等官方文档出来后，以官网为准。环境搭建直接使用脚手架，如果本地没有安装的可以执行脚手架安装命令： npm install -g @vue/cli 如果本地安装过的，可以尝试更新一下： npm u
vue 单页应用中微信支付的坑标签（空格分隔）： 微信 支付 坑 vue场景在微信H5页面（使用 vue-router2 控制路由的 vue2 单页应用项目）中使用微信 jssdk 进行微信支付。基本知识1.依据微信jssdk官方文档，使用微信功能的页面，必须进行微信 config，并在wx ready 之后再调用微信功能。
2.进行微信支付的话，需要在微信开放平台配置微信支付合法路径。该合法路径
MENU01、v-if和v-show指令02、Vue路由拦截03、Vue中父子组件生命周期钩子函数的执行顺序04、MVVM05、v-for和v-if06、Vue中的data07、v-model（双向绑定）08、route和router的区别09、vue-router10、computed（计算属性）和watch（监听）的区别及应用场景11、Proxy与Object.defineProperty优
转载
2024-09-12 22:41:30
57阅读
作者：清风皓月一.涉及技术点vite版本vue3ts集成路由集成vuex集成axios配置Vant3移动端适配请求代理二.步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录，新建index.ts文件import
近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用rem来实现适配问题 1.首先安装一个px转rem的插件npm install postcss-pxtorem --save2.新建一个rem.js文件// 设置 rem 函数
function setRem() {
const pageWidth = window.innerWidth;
//为了ie也能拿到
转载
2024-05-15 15:01:43
812阅读
