typescript vite4 pinia vite
TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
本文主要介绍TS基础及在Vue中的实践，附赠《JS项目转TS指南》，旨在帮助还在使用JS的朋友快速使用TS，享受TS带来的丝滑体验。 ......
用pinia和<KeepAlive>时需要注意Cache被改写的问题
用了pinia做状态管理，如果代码写的不当，遇到 <KeepAlive>时容易造成Cache被改写的问题 computed: { ...mapWritableState(useGoodsStore, { _listData: 'items', _isListEnd: 'isListEnd', _ma ......
[Typescript] Use never for readable string
const demoFunc = <TObj extends {}>(obj: TObj, key: ErrorIfNever<keyof TObj, `You much pass at least one key`>) => { return obj[key as keyof TObj] } ty ......
vue中新的状态管理器-pinia
背景 对于pinia的使用，可参考官方文档在这不做过多赘述。这边主要来讲讲pinia中 少用且好用的方法，为什么我们选择pinia而不用vuex ps: 以下写法全部基于组合式API 使用方式： 先下载依赖 npm i pinia -s 在vue3中，main.js这么写 import { crea ......
Pinia的定义与使用
Pinia 是 Vue 的存储库,可以跨组件/页面全局共享，数据是存储在缓存中。 1、安装 npm install pinia 2、注册 在main.js中注册pinia // 注册pinia import { createPinia } from 'pinia' app.use(createPin ......
微信公众号跳转小程序 wx-open-launch-weapp，在vue3+vite中使用 (多个问题集锦)
写这篇文章为了解决现在没有⼀个合集 ，所以我参考其他文档， 及自己的测试最后得出完整的方案 1. 公众号后台关联小程序 要求已认证的服务号 ，在服务号中关联要跳转的小程序 配置 JS接口安全域名 2. 调用wx.config配置‘wx-open-launch-weappʼ标签 3. 修改微信本来的内 ......
TypeScript 笔记
Date: 2023-03-08 18:35:12 尚硅谷 TypeScript 教程（李立超老师 TS 新课） TS 没什么难的，一种写法罢了 P1 TS简介 JS 是一种轻量型语言，很难报错，所以很难去写大型项目，维护性很低。有报错难以及时发现，比如写函数类型的参数，无需定义类型。这既是好处也是 ......
基于 vue3 + vite + typeScript + Element-Plus + pinia + mock ... 从 0 到 1 搭建后台管理系统完整教程
项目说明 代码仓库地址 https://github.com/caix-1987/vue3-vite-typescript-elementplus-pinia 项目预览地址 https://caix-1987.github.io/vue3-vite-typescript-elementplus-pi ......
第三篇 TypeScript 【 typeScript 函数 + typeScript 数组 + typeScript 对象】
typeScript 函数 TypeScript 函数与 JavaScript 函数的区别 | TypeScript 函数 | JavaScript 函数 | | | | | 含有类型 | 无类型 | | 箭头函数 | 箭头函数（ES2015） | | 函数类型 | 无函数类型 | | 必填和可选参 ......
第四篇 TypeScript 【 typeScript 接口 + typeScript 类 】
typeScript 接口 【 interface 】 1、在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现 2、TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述 对象的 ......
第一篇 TypeScript 【typeScript 概述 + typeScript 基础类型】
typeScript 知识体系 1、TypeScript 是什么 2、TypeScript 基础类型 3、TypeScript 断言 4、TypeScript 类型守卫 5、TypeScript 联合类型和类型别名 6、TypeScript 交叉类型 7、TypeScript 函数 8、TypeSc ......
第五篇 TypeScript 【 typeScript 泛型 + typeScript 装饰器 】
typeScript 泛型 1、软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能 2、在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以 ......
第二篇 TypeScript 【 typeScript 断言 + typeScript 类型守卫 + typeScript 联合类型、可辨识联合和类型别名 + typeScript 交叉类型】
typeScript 断言 1、有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息，通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型 2、通过 类型断言 这种方式可以告诉编译器，“相信我，我知道自己在干什么” 3、类型断言 好比其他语言里的类型转换，但是不进 ......
第六篇 TypeScript 【 typeScript 编译上下文 tsconfig.json 】
typeScript 编译上下文 tsconfig.json 的作用 1、用于标识 TypeScript 项目的根路径 2、用于配置 TypeScript 编译器 3、用于指定编译的文件 tsconfig.json 重要字段 1、files - 设置要编译的文件的名称 2、include - 设置需 ......
TypeScript 学习总结
| | TypeScript | JavaScript | | | | | | 语言 | 面向对象编程语言 | 面向脚本编程 | | 是否支持可选参数 | 支持 | 不支持 | | 是否支持静态类型 | 支持 | 不支持 | | 是否支持接口 | 支持 | 不支持 | TS：是JS的超集，即对JS的 ......
vue3 中 pinia 的 state 修改模版绑定的 state 数据没更新？
解决方案： 给 state 增加 computed import { useLayerStore } from "@/stores/"; const layer = useLayerStore(); const layerList = computed(() => layer.layerList); ......
解决vite使用alias引入图片不显示的问题
参考： https://juejin.cn/post/7009441745301667853 方法一：配置alias //app.vue <img src="/images/logo.png" alt="" /> //vite.config.js import { defineConfig } fr ......
TS+vite+Vue3打包报错
报错信息见上图 根据要求进行修改操作 由于vite将ts的配置文件tsconfig.json隐藏,所以在暴露出来的tsconfig.json中进行修改 根据依赖继承，能够找到现在的js版本为：ES2016 在暴露出来的tsconfig.json中增加： 再次打包后，接着代码出现不识别HTML和win ......
laravel9出现的vite版本不适问题
laravel版本 问题描述 下载laravel之后，准备使用Laravel Breeze，先执行如下命令 composer require laravel/breeze --dev 接着执行如下命令 php artisan breeze:install vue 经过多次测试，还是出现一下问题 解决 ......
大型typescript项目优化webpack编译速度
Person: A large typescript project takes a long time to start every time, using the default configuration of webpack5, is there any optimization solut ......
TypeScript学习【1】
TypeScript 数据类型 布尔 boolean 布尔类型与js的一致，接收true和false 数字 number 数字类型可以接受2进制、8进制、10进制、16进制 字符串 string 和JavaScript一样 可以使用''、""、`` 数组 [] 数组类型，可以规定数组内的类型，也可以 ......
TypeScript给接口添加任意属性
一个接口允许存在任意的属性 interface IPerson { name: string; age: number; userBio?: string; [propName: string]: any; } let wangzz: IPerson = { name: 'wangzz', age: ......
vue3 + vite 调试时断点位置错误
vite-plugin-vue-setup-extend（版本0.4.0） 插件的问题，删掉就好了。 该插件用于解决script setup语法糖下，不方便直接指定name名称的问题。 在 vite/plugins/index.js 文件中 注释 export default function cr ......
typescript 学习
https://github.com/iamshaunjp/typescript-tutorial typescript是一种编程语言，可以用作JavaScript的替代品，现在它实际上被称为超集JavaScript语言 一 安装 TypeScript npm install -g typescri ......
npm安装依赖环境报错（vite、@vitejs/plugin-legacy等）
一、问题： 在做vite + vue3项目，由于前端页面加载过慢，处理vite相关优化时安装相关插件提示的报错信息，在这里记录是方便遇到同样问题的小伙伴能快速解决问题。 二、原因： npm的版本过高才导致 三、解决方案：在npm 后面加 --force 或者 --legacy-peer-deps n ......
pinia的简单基本demo
在组件中使用 Pinia 状态管理： <template> <div> <p>当前计数：{{ count }}</p> <button @click="increment">增加</button> <button @click="decrement">减少</button> </div> </tem ......
在vite中，如何省略VITE_这样的前缀来创建一些自定义的环境变量
1.vite自带的属性envPrefix 这个属性只能修改掉VITE_这样的开头，并且不能为空 详情参考 2.使用dotenv插件 如果你不想被这些瓶瓶罐罐约束，想定义什么变量就定义什么变量的话 那你可以尝试使用dotenv这个插件 dotenv：npm 官方文档的这样介绍 dotenv: Dote ......
Vue3+vite项目中如何动态导入并创建多个全局组件
背景 实际开发项目中，有些时候我们需要通过全局注册多个自定义组件，但是每个组件都导入一次，将会导致代码很冗余。 实现方案 customComponents/index.js const files = import.meta.globEager("@/customComponents/*.vue") ......
vite V3.0.0 vite.config.ts 引入插件vite-plugin-vue-setup-extend-plus报错（vueSetupExtend不是一个函数）
vite V3.0.0 vite.config.ts 引入插件报错（***** 不是函数） ·问题 #9414 ·Vitejs/Vite (github.com) 我的错误提示如下 ERROR failed to load config from D:\Work\TestCode\LuoCoreAd ......
Vue3中使用pinia
Vue3中使用pinia Pinia是一个轻量级的、基于Vue 3的状态管理库，它的设计目标是提供简单易用的API，使得开发者能够更加便捷地管理Vue 3应用程序中的状态。与Vuex相比，Pinia更加轻量级和易于理解，适用于中小型应用程序。 Pinia的核心是store实例，每个store实例都包 ......