typescript
Agwenbi
星光不问赶路人,时光不负有心人
展开
-
使用rollup打包vue3+ts+vite组件并发布至npm
rollup打包vue3+ts+vite的组件功能案例教程原创 2023-05-22 21:45:59 · 2347 阅读 · 2 评论 -
关于ResizeObserver用于监听元素尺寸变化
xxx/directive.ts文件。xxx/index.ts文件。以下代码案例皆属于vue3。原创 2023-04-14 11:21:41 · 511 阅读 · 0 评论 -
关于Vue在二次封装UI组件时,处理ref的问题
二次封装处理ref问题原创 2023-04-11 15:48:25 · 1192 阅读 · 1 评论 -
vue3结合keepalive使用路由刷新
路由声明,注意组件中必须设置name属性,includeRouteName是组件name的数组集合,类型为string[]新建reload.vue,代码如下。// pinia,根据自己情况。原创 2023-03-31 09:25:59 · 1858 阅读 · 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 · 1329 阅读 · 0 评论 -
vue3中tsx的基本语法使用
vue3中tsx的基本语法使用原创 2022-07-20 09:38:53 · 3476 阅读 · 0 评论 -
vue3+vite+ts项目使用css modules
安装插件插件地址npm install -D typescript-plugin-css-modulesyarn add -D typescript-plugin-css-modules配置插件,tsconfig.json文件中{ "compilerOptions": { ... "plugins": [{"name": "typescript-plugin-css-modules"}] } ...}配置vscode软件的settings.json文件-&g原创 2021-12-30 09:41:57 · 2976 阅读 · 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 · 468 阅读 · 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 · 12141 阅读 · 14 评论 -
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 · 1011 阅读 · 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 · 935 阅读 · 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 · 2415 阅读 · 8 评论 -
typescript常用的一些内置类型
1.ReturnTypetype ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;//推断函数返回值的数据类型 const returnTypeFunc = () => { return [{ a:1 }]}type returnType = ReturnType<typeof retur原创 2021-04-29 22:44:40 · 1068 阅读 · 0 评论 -
es6的导出形式
原创 2021-04-20 19:47:21 · 163 阅读 · 0 评论 -
typescript部分内置类型的使用
/* Exclude<T,K>Exclude:T类型中过滤掉包含K类型*/type A = Exclude<'a' | 'b' | 'c','a' | 'e'>; // A:'b' | 'c'/* NonNullable<T>NonNullable:过滤掉T类型中的undefined、null、never类型*/type B = NonNullable<string | number | undefined | null | boolean...原创 2021-04-19 21:35:03 · 227 阅读 · 0 评论 -
scss导出颜色变量
1、新建一个scss文件,例如menu.module.scss,注意中间要有一个module2、里面写入以下测试颜色变量,使用:export导出3、在vue中使用原创 2021-04-16 21:01:01 · 912 阅读 · 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 · 2539 阅读 · 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 · 2060 阅读 · 0 评论 -
webpack配置打包ts+scss
1、首先新建一个项目文件夹,我这里是tanchishe(贪吃蛇),注意不能是中文2、在终端中进入这个文件夹的路径,生成package.json文件,并加入以下命令(后续打包可直接输入cnpm run build)npm init -y"build":"webpack"3、生成tsconfig.json文件,后续此文件根据个人情况按需配置tsc --init4、安装webpack、ts及scss的所需资源包cnpm install webpack webpack-cli t原创 2021-01-13 11:49:59 · 929 阅读 · 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 · 2031 阅读 · 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 · 832 阅读 · 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 · 1589 阅读 · 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 · 1218 阅读 · 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 · 3684 阅读 · 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 · 996 阅读 · 0 评论 -
js中call、bind、apply的详细使用教程
1、call的用法let obj = { name:"Agwenbi", age:25}function add(...args){ console.log(this);//obj对象 console.log(args);//参数1,2,3}/* call用法解析 xxx.call(obj,1,2,3) 表示调用xxx函数,并将xxx函数里面的this指向call的第一个参数(这里是obj) 其余的call参数将作为xxx函数的原创 2020-10-26 21:07:19 · 413 阅读 · 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 · 901 阅读 · 0 评论 -
vue中异步组件的使用
1、我们经常使用组件的形式是下面的这种情况(注意:我这里使用了ts)2、下面是使用异步组件的一种方式,类似于异步路由3、或者使用这种方式4、非ts版本可以参考https://blog.csdn.net/weixin_39975379/article/details/93179282...原创 2020-09-22 10:29:27 · 809 阅读 · 0 评论 -
node项目(express)从零开始构建TypeScript
1、标注:本案例使用ejs模板,express框架,编辑器为vscode2、开始准备工作,首先全局安装express、typescript、ts-node,nodemon,网络不好用cnpmnpm i express -g//全局安装expressnpm i -g typescript//全局安装ts编译工具npm i -g ts-node//全局安装ts运行工具npm install -g nodemon//全局安装nodemon3、然后开始新建一个node项目,打开vscode,控制原创 2020-09-16 10:06:41 · 1348 阅读 · 4 评论 -
typescript说明文件的配置使用
1、举例我们在typescript文件中使用jquery.js文件(以下简称jq),如果我们不对jq进行描述,会在ts中报错(但不影响使用)2、当前的目录结构3、在index.html中引入jq及demo.ts4、demo.ts文件中输入一些简单的代码,就会发现报错,但是不会影响输出结果,执行index.html能正确执行,如下图5、在src下新建jquery.d.ts文件,注意,格式为(描述文件名.d.ts),输入以下代码既不会再报错,浏览器也能正常执行6、更多的j原创 2020-09-14 17:43:42 · 324 阅读 · 0 评论 -
关于export的多种导出形式
1、文件中存在多个export的时候//module.ts文件export class Modulea{ constructor(public params:string){ console.log(params); }}export class Moduleb{ constructor(public params:string){ console.log(params); }}export class Modulec{原创 2020-09-14 14:47:48 · 10306 阅读 · 1 评论 -
tsconfig.json中文文档地址
1、https://www.tslang.cn/docs/handbook/tsconfig-json.html2、https://www.tslang.cn/docs/handbook/compiler-options.html原创 2020-09-12 17:02:51 · 278 阅读 · 0 评论 -
vue与TypeScript的基本使用
1、data的使用<template> <div class='helloTs'> <p>{{msg}}</p> <p>{{title.msg}}</p> </div></template><script lang="ts">/* 注意这里要写ts的标识 */ import { Component,Vue } from 'vue-pr原创 2020-08-18 21:49:17 · 641 阅读 · 0 评论 -
typescript与javascript的前世今生
1、typescript的“个人简历”1、javascript的超集2、支持ECMAScript6标准,并支持输出ECSMA3/5/6标准的纯javascript代码3、支持ECMAScript未来提案中的特性,比如异步功能和装饰器4、支持类型系统且拥有类型推断5、支持运行在任何浏览器、node.js环境中2、javasript出生历史1、1995年在网景浏览器中首次发布,当时还不叫javascript,叫LiveScript2、后来决定蹭一下java的热度,改名为JavaScri原创 2020-07-29 19:52:27 · 428 阅读 · 0 评论 -
typescript学习记录
1、typescript初体验//安装ts编译工具npm i -g typescript//安装ts运行工具npm i -g ts-nodeconsole.log("hello typescript");//控制台输入ts-node 文件名即可let str: string = "Hello TypeScript";console.log(str);2、类型案例//字符串类型let string:string = 'Hello TypeScript';console.lo原创 2020-07-29 17:09:51 · 262 阅读 · 0 评论