在做vue3项目中时，每次使用都需要先进行引入，用ts的还好，会有爆红提示，如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入，就会很浪费时间，偶然发现一款好用的组件可以帮助我们很好的解决这种问题。 首先下载 安装 yarn add unplugin-auto-import -D   引入 在vite.config.ts中  因为是插件 所以在我们的plugins下 写入我们导入的名字 imports  在我们的 AutoImport 下第一个

这篇文章会带着你从零搭建一个基于 vue3 的组件库。 github 地址 gitee 地址 话不多说，开搞 项目搭建 新建 vangle 项目 cd vangle 进入项目 pnpm init -y 初始化 package.json 文件，没安装 pnpm 的需要提前安装一下 npm i pnpm -g 新建 packages 目录，里面存放我们要开发的项目，例如 components、cli 等 创建 pnpm-workspace.yaml 文件，并指定 package

为什么要使用vue-property-decorator vue-property-decorator是在vue-class-component的基础上做了进一步的封装，在TypeScript官方文档 中，官方推荐了vue-class-component，提供了Vue，Component等，而vue-property-decorator是社区出品，深度依赖于vue-class-component，提供了更多操作符：@Component，@Prop，@Watch，@Emit……

在JavaScript中，对象是一组无序的相关属性和方法的集合。所有的实物都是对象，例如，字符串、数值、数组、函数等。 下面我会介绍三种创建对象的方法。 一、通过字面量创建对象 其语法格式如下： var 对象名 = {}; // 创建了一个空对象 var 对象名 = { 属性名: 属性值, // 创建了一个属性 方法名: function () { // 创建了一个方法 } } 注意点： 属性名和方法名后面跟的是冒号。 多个属性和方法之间要用逗号隔开。 例如， var obj

目前前端最流行的网络请求库还是axios，所以对axios的封装很有必要，此次基于vue3+ts的环境下。 axios的基本使用 import axios from 'axios' // console.log('adh') axios.get('http://XXX.xxx.xxx.xxx:8000/home').then((res) => { console.log(res.data) }) axios.get()会返回一个Promise对象,所以可以用.then获取返回

cookie配置项 第一步 执行命令 npm install js-cookie 第二步 在根目录的untils文件夹下面新建auth.js文件 第三步 auth.js文件的内容 1.引入Cookies 2.定义存储的名字 3.调用cookie中自带的方法 a.Cookies.get:获取保存的值 b.Cookies.set:设置新的值 c.Cookies.remove:删除cookies里面的值 4.抛出用自带方法定义的函数 import Cookies fr

extends 泛型约束 我们一般使用extends来继承接口或者类，但是extends还可以用来泛型约束 function getCnames<T extends { name: string }>(entities: T[]):string[] { return entities.map(entity => entity.cname) } 比如，以上代码对传入的参数进行了约束，传入的参数必须要有name这个属性，否则就会出错 条件类型与高阶类型 exte

unplugin-auto-import的配置和eslint报错解决 先上官网：unplugin-auto-import unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。 unplugin-auto-import常用的配置如下： AutoImport({ // 目标文件 include: [ /\.[tj]sx?$/, /

Vue3 新的发展方向（来源于尤大知乎） Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本 基于 Vite 的极速构建工具链 <script setup> 带来的开发体验更丝滑的组合式 API 语法 Volar 提供的单文件组件 TypeScript IDE 支持 vue-tsc 提供的针对单文件组件的命令行类型检查和生成 Pinia 提供的更简洁的状态管理 新的开发者工具扩展，同时支持 Vue 2/Vue 3，并且提供一个插件系统

eNSP安装大纲 eNSP安装详细图解篇幅较长，会分三篇更完。急需安装的朋友可以在文末获取图解文档和所需软件工具。 三个插件和eNSP安装步骤 安装ensp之前必须先安装以下三个插件： VirtualBoX安装 双击安装包，运行安装程序，直接点击下一步； 安装位置可以选择默认； 直接下一步； 直接下一步； 直接点击下一步； 然后点击完成； WinPcap安装 点击WinPcap 进行安装，出现如图页

dev 模式 利用vite 配置代理，可以解决前端浏览器限制跨域问题（当然后端要自己配置好） export default defineConfig({ // 配置在打包时，保障所有css\js能被找到 base: './', //自带配置 plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.

一、 Prop、Emit Prop： 通过Prop父组件 向子组件传递数据Emit： 通过Emit子组件向父组件传递数据父组件 <template> <div> <Child :propRef="propRef" :propReactive="propReactive" @emitValue="getEmitValue" /> </div> </div> </template> <