Vue
Agwenbi
星光不问赶路人,时光不负有心人
展开
-
使用rollup打包vue3+ts+vite组件并发布至npm
rollup打包vue3+ts+vite的组件功能案例教程原创 2023-05-22 21:45:59 · 2101 阅读 · 1 评论 -
使用modelModifiers处理自定义修饰符
/ 这里会输出{aaa: true}原创 2023-04-27 09:40:27 · 287 阅读 · 0 评论 -
关于ResizeObserver用于监听元素尺寸变化
xxx/directive.ts文件。xxx/index.ts文件。以下代码案例皆属于vue3。原创 2023-04-14 11:21:41 · 478 阅读 · 0 评论 -
关于Vue在二次封装UI组件时,处理ref的问题
二次封装处理ref问题原创 2023-04-11 15:48:25 · 996 阅读 · 1 评论 -
vue3结合keepalive使用路由刷新
路由声明,注意组件中必须设置name属性,includeRouteName是组件name的数组集合,类型为string[]新建reload.vue,代码如下。// pinia,根据自己情况。原创 2023-03-31 09:25:59 · 1734 阅读 · 1 评论 -
关于在vue3中使用setup语法糖后设置name的问题
npm i unplugin-vue-define-options或者yarn add unplugin-vue-define-options。当我们不使用setup语法糖时,我们可以以上形式设置name。当我们使用setup语法糖的时候,我们可以借助。插件帮助我们设置name。在xxx.vue中使用。原创 2023-03-27 16:54:41 · 1285 阅读 · 0 评论 -
axios取消重复类型请求的封装
axios取消请求的封装转载 2022-11-03 16:07:33 · 431 阅读 · 0 评论 -
vue中使用Monaco Editor代码编辑器记录
Monaco Editor基本使用及常用方法使用教程原创 2022-09-16 10:57:26 · 1522 阅读 · 0 评论 -
vue3中tsx的基本语法使用
vue3中tsx的基本语法使用原创 2022-07-20 09:38:53 · 3417 阅读 · 0 评论 -
socket.io实现聊天功能
一、环境说明文档地址:socket.io服务端使用express+ts客户端使用vue3+ts二、基本使用1.服务端安装socket.ionpm i socket.io -S参考代码import express from 'express';import { Server } from 'socket.io';import http from 'http';const app = express();const server = http.createServer原创 2022-03-28 16:24:52 · 848 阅读 · 1 评论 -
vue3+vite使用jsx/tsx
安装@vitejs/plugin-vue-jsxyarn add -D @vitejs/plugin-vue-jsxnpm i -D @vitejs/plugin-vue-jsx配置vite.config.js...import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({ plugins: [vueJsx(), ...], ...})使用实战新建xxx.tsx或者xxx.jsx,注意不原创 2021-12-29 13:29:39 · 3583 阅读 · 4 评论 -
vue中使用v-bind(v-on)绑定所有元素的属性(方法)
vue中使用v-bind(v-on)绑定所有元素的属性(方法)原创 2021-12-29 09:32:39 · 2419 阅读 · 0 评论 -
vue3.0单文件组件api的使用
Agwenbi升级vue版本到3.2以上引入组件时的注意事项definePropsdefineEmitsdefineExposeuseSlotsuseAttrsstyle的新特性之globalstyle的新特性之deepstyle的新特性之modulestyle的新特性之v-bind升级vue版本到3.2以上npm i vue -Snpm i @vue/compiler-sfc -D引入组件时的注意事项你可能会在引入组件时遇到下面的报错问题,并且组件不能正确显示出来导入组件时,首字母必须大原创 2021-08-18 17:21:00 · 457 阅读 · 0 评论 -
ts封装axios,并处理返回值
本项目的案例是针对vue3准备vue3+ts+axios的项目环境,这里不演示src下新建所需文件夹及对应文件,如下图api 保存所有的接口列表及对应的返回数据类型http 初始化axios,如果超时,设置拦截器等操作axios 二次封装好的axios,供开发人员使用设置api.ts,假设如下/** * @description: 所有的接口列表 * @param {*} 无参数 * @return {*} 无返回值 * ```js * key表示url路径缩写 * va.原创 2021-07-23 15:58:24 · 11897 阅读 · 14 评论 -
Vue自定义指令功能整合
当前案例全部是vue3+TS,vue2的可以根据自己情况修改1.v-copy指令文本内容复制指令// copy.tsimport { App, Directive } from "vue";const copy: Directive<HTMLElement> = { beforeMount(el, binding){ if(binding.modifiers.ref && binding.value){// 如果是要复制指定ref元素的数.原创 2021-07-07 16:01:24 · 348 阅读 · 2 评论 -
ts增强编译vuex之commit
1.接上一篇文章https://blog.csdn.net/Ag_wenbi/article/details/1181057782.hooks文件夹下新增commit.ts文件,并写入以下代码import module from "@/store/modules";type GetModule<Modules> = Modules extends { mutations: infer M } ? M : unknown;type GetModuleItems<Mod原创 2021-06-22 14:50:55 · 987 阅读 · 0 评论 -
ts增强编译vuex之dispatch
1.接上一篇文章https://blog.csdn.net/Ag_wenbi/article/details/118101881?spm=1001.2014.3001.55012.hooks文件夹下新增dispatch.ts文件,并写入以下代码,这里不做解析,详细操作上一篇文章,地址在第一步import module from '@vuex/modules';type GetModule<Modules> = Modules extends { actions: infer原创 2021-06-22 14:07:23 · 921 阅读 · 3 评论 -
ts增强编译vuex之getters
1.准备条件,vue3项目,并且安装了vuex与ts,这里不再演示2.在src下新建store文件夹,并在store文件夹下新建index.ts文件与modules文件夹,如下图3.在main.ts中注册vuex(此时main.ts会提示报错,因为第二步创建的文件信息都还是为空)import { createApp } from 'vue'import App from './App.vue'import store from '@vuex/index';const app = c原创 2021-06-22 11:35:49 · 2321 阅读 · 8 评论 -
eslint的个人常用配置
rules: { 'no-multi-spaces': 'error',//禁止使用多余的空格 'no-var': 'error',//禁止var 'no-unused-vars': 'error',//禁止出现未使用的变量 'quotes': ['error', 'single', {'allowTemplateLiterals': true}], 'indent': ['error', 2],//控制缩进为两个空格 'no-extra-semi': 'e.原创 2021-06-11 16:32:22 · 673 阅读 · 1 评论 -
scss导出颜色变量
1、新建一个scss文件,例如menu.module.scss,注意中间要有一个module2、里面写入以下测试颜色变量,使用:export导出3、在vue中使用原创 2021-04-16 21:01:01 · 871 阅读 · 2 评论 -
vue项目中axios的基本配置
1、导入axios包npm install axios -S2、根据项目情况,设置代理(我这里是vite工具,webpack工具大同小异)server:{ proxy:{ '/api':{//开发环境所需 target:'https://nei.netease.com/api/apimock-v2/b231c267a9cdd8901d13358cee6c6629/ceshi/', changeOrigin:true, r原创 2021-03-27 10:10:38 · 2495 阅读 · 2 评论 -
vite2+vue3+Ts+vuex+router+element-plus项目初始化教程
1、首先检查脚手架是否大于4.5以上,如果低于4.5,请升级版本vue --version //检查版本,低于4.5执行以下命令npm install -g @vue/cli//升级脚手架命令2、确保node版本大于12.0.0,低于当前版本的自己升级node -v//检查node版本http://nodejs.cn/ //升级地址3、开始创建项目,命令行中输入以下命令npm init @vitejs/app//或者cnpm init @vitejs/app4、原创 2021-03-17 22:14:02 · 2020 阅读 · 0 评论 -
qiankun微前端使用记录
1、新建两个项目,一个名为parent(主应用),注意主应用的CSS样式尽可能的自己手写,避免使用一些UI框架后,样式与微应用的产生冲突,一个child1(微应用)2、主应用安装qiankunnpm i qiankun -S3、主应用中新建一个子路由界面(child1),注意路径,用于接下来的微应用的渲染import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'原创 2021-03-01 09:48:50 · 417 阅读 · 1 评论 -
手写shallowReadonly和readonly
1、shallowReadonlyconst shallowReadonlyHandler = { get(target,prop){ console.log('执行了数据的获取操作'); return Reflect.get(target,prop); }, set(target,prop,val){ console.warn('只读数据不能进行更改或添加操作'); return true; },原创 2020-12-29 17:10:39 · 223 阅读 · 0 评论 -
vue3手写shallowReactive和reactive
1、shallowReactiveconst shallowReactiveHandler = { get(target,prop){ console.log('拦截到了获取数据'); return Reflect.get(target,prop); }, set(target,prop,val){ console.log('拦截到了更新数据或设置新属性'); return Reflect.set(target,p原创 2020-12-29 09:57:24 · 378 阅读 · 0 评论 -
vue3中keep-alive及include/exclude的使用
1、首先准备前期环境,路由配置及界面配置const addRouters: Array<RouteRecordRaw> = [{//路由 path:'/', name:'home', component:() => import('@/views/home/home.vue'), children:[{ path:'/', redirect:'/A' },{ path:'/A', name:'A', component:() => import('原创 2020-12-24 15:01:22 · 7150 阅读 · 0 评论 -
node生成token与验证token(typeScript语法)
1、首先安装jsonwebtoken(c)npm install jsonwebtoken -S2、根据前端发送的登录信息,生成对应tokenimport { Router,Request,Response } from "express";import jwt from 'jsonwebtoken';export default (router:Router) => { router.post('/',(req:Request,res:Response) => {原创 2020-12-22 15:41:52 · 1312 阅读 · 0 评论 -
vue中slot的多种用法
1、基本用法//组件<template> <div class="com"> <slot name="header"></slot> <slot>如果没有插槽或者不具名就是显示当前</slot> <slot name="floot"></slot> </div></template><script>原创 2020-12-14 11:29:00 · 1130 阅读 · 0 评论 -
vue中watch的多种用法
1、常用的用法<template> <div id="app"> <input type="text" v-model="val" /> <div>{{message}}</div> </div></template><script>export default { name:"App", data(){ return{...原创 2020-12-14 08:58:07 · 371 阅读 · 1 评论 -
provide与inject的基本使用
1、首先新建三个组件(parent,son,grandson)2、parent.vue如下<template> <div> {{msg}} <son></son> </div></template><script>import son from "@/components/son.vue";export default { name:"parent"原创 2020-12-12 10:08:03 · 257 阅读 · 0 评论 -
Vue.extend的基本使用
使用extend自定义一个全屏loading组件1、定义loading组件import Vue from "Vue";const LoadingCom = Vue.extend({ template:`<div style="position:fixed;left:0;right:0;width:100%;height:100%;z-index:999;background:#d8d8d8;color:#000;" id="aaa" > {{msg}}原创 2020-12-12 09:48:55 · 933 阅读 · 0 评论 -
vue3中进行vuex的分包管理(typescript)
1、首先创建如下的目录结构,modules文件夹里面的名称根据自己情况来2、打开index.ts,引入对应的包结构,引入之后会报错,因为包nav与user还没有任何内容import { createStore } from "vuex";import nav from './modules/nav';import user from './modules/user';export default createStore({ modules:{ nav,原创 2020-11-23 11:39:06 · 1986 阅读 · 3 评论 -
ts+vuex+promise模拟数据请求及保存
1、模拟数据请求,例如我们与后端约定如下的数据格式/*请求失败时*/{ success:false,//请求失败 msg:"请求失败"}/*请求成功时*/{ success:true,//表示请求成功 data:[{ id:1, name:'Agwenbi' },{ id:2, name:'张三' },{ id:3, name:'李四' }原创 2020-11-20 16:14:01 · 808 阅读 · 1 评论 -
vue3与vue2父子组件之间使用v-model实现双向绑定
1、vue3,可以添加多个v-model/*父组件*/<template> <div> <ceshiCom v-model:val='val' v-model="blurVal"></ceshiCom><!-- 如果不设置val,默认是modelValue --> {{val}}-{{blurVal}} </div></template><script la原创 2020-11-17 18:36:08 · 1557 阅读 · 0 评论 -
vue3中teleport传送门与emits事件的使用
1.teleportCom组件<template> <teleport to="body">//插入到指定的元素位置 <div class="main" v-if="isOpen"> <slot>默认文字显示</slot> <button @click="closeModal">关闭传送门</button> </div>原创 2020-11-13 11:52:24 · 1193 阅读 · 0 评论 -
vue3中provide 和 inject(依赖注入)与use的使用案例
1、依赖注入//main.ts中app.provide("globalKey",ref("Agwenbi"));//全局变量app.provide("globalFunc",(str:string):void => {//全局函数 console.log(str);});//xxx.vue中import { defineComponent,inject,ref } from 'vue'export default defineComponent({ setup (原创 2020-11-12 09:33:06 · 3639 阅读 · 0 评论 -
vue使用nuxt进行服务端渲染(项目开始篇)
1、首先我们先初始化项目(c)npm init nuxt-app ssr//ornpx create-nuxt-app <project-name>2、配置项目信息(按空格切换选中与取消)后面就根据情况设置一些github与git信息了,等待项目创建完成3、项目结构的说明(一些熟悉的结构就不再介绍)layouts:布局目录layouts用于组织应用的布局组件。若无额外配置,该目录不能被重命名。middleware:用于存放应用的中间..原创 2020-11-11 16:28:08 · 975 阅读 · 0 评论 -
vue3 Composition API、vue-Router、Vuex的学习记录
1、Composition APIhttp://note.youdao.com/s/CiRuFRIZ;http://note.youdao.com/s/ARDWzDbp原创 2020-10-13 16:11:47 · 892 阅读 · 0 评论 -
vue中使用inheritAttrs实现组件的扩展性
1、首先我们创建一个input组件<template> <div class="inputCom-wrap"> <input v-bind="$attrs" /> </div></template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({ inhe原创 2020-10-12 09:33:22 · 319 阅读 · 2 评论 -
vue中异步组件的使用
1、我们经常使用组件的形式是下面的这种情况(注意:我这里使用了ts)2、下面是使用异步组件的一种方式,类似于异步路由3、或者使用这种方式4、非ts版本可以参考https://blog.csdn.net/weixin_39975379/article/details/93179282...原创 2020-09-22 10:29:27 · 795 阅读 · 0 评论