ICode9

最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。 组件源码见另一篇博客， 用到的技术栈：VUE3、SCSS 用过antd-vue的都应该知道主要的传参是两个：columns和dataSource，分别对应表头信息和表格的数据信息。 1

解决方法： 如果npm仓库含有@types/XXX安装包，可以使用npm i @types/XXX下载如果没有则自己声明一个xxx.d.ts 文件，文件内抛出any类型的文件 文件内容 declare module 'vue3-cron' （例如使用vue3-cron） 最后：记得重启编辑器(idea)

Vue3 npm init vite Vite与Webpack webpack打包是递归依赖,构建AST抽象语法树,再把抽象语法树转成浏览器可识别的代码 Vite通过劫持浏览器请求,将文件进行分解和整合，无需打包编译，速度很快。webpack使用NodeJS实现，Vite使用Go语言编写的esbuild预构建依赖，速度快至少10倍。webp

在vue3项目中集成font-awesome时遇到了一些坑，写下来让大家避开。 1、npm安装 $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons 2、注意（vue3） $ npm i --save @fortawesome/vue-fontawesome@prerelease 这步出错会导致运

一、写在前面 很多时候我们需要对前端进行调试，也就是前后端接口之间交互的调试，常用的方式肯定是打日志了，如console.log('日志内容')。 就单个方法其实用这种方法是可以的，多个接口和方法，这样的调试方法就差了一些，再有就是方法有执行顺序，有时候反倒影响调试了。 二、使用axios拦截器

由于vantUI炸了(各种报错),所以我还是用elements plus mock用不来,下次一定,这波是elements plus+vue3+vue-router,        图一和图二都实现了, 虽然比较粗制滥造,但也还行.   现在的问题是怎么实现图三, 也就是,点击日期然后跳个弹窗出来显示XX信息的 明天去提问,溜了溜了

一、问题背景 　　vue3使用el-form的时候，如下代码，会导致输入框无法输入，无法赋值，选择框无法选择 <el-form ref="service" :model="service" label-width="80px"> <el-form-item label="名称"> <el-input v-model="service.name">&l

一.vue3新特性： 　　1.数据响应重新实现（ES6的proxy代替Es5的Object.defineProperty） 　　2.源码使用ts重写，更好的类型推导 　　3.虚拟DOM新算法（更快，更小） 　　4.提供了composition api，为更好的逻辑复用与代码组织 　　5.自定义渲染器（app、小程序、游戏开发） 　　6.Fragment，模板可以

import { reactive, computed } from "vue"; export default { name: "HelloWorld", setup() { let person = reactive({ firstName: "李", lastName: "晓玲", }); //计算属性简写（没有考虑计算属性被修改被修改的情况） person

好家伙,水博客怎么说   1.0.安装:简简单单的淘宝镜像安装 装一下淘宝镜像(一般都有) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后装router cnpm install vue-router@4 //vue3用版本router4   2.路由语法 //写在router.js中src目录下 inport {c

环境：node.js 版本>=12.0.0; npm 6.x。 注：每做一步，都要查看有木有错，或是否有达到预期效果。 1. 搭建 npm init @vitejs/app vite-vue-demo --template vue cd vite-vue-demo npm i npm run dev  2. 配置 vite.config.js import { defineConfig } from "vite"; import path from

最近有小伙伴跟我聊起setup函数，因为习惯了vue2.x的写法导致了，setup用起来觉得奇奇怪怪的，在一些api混编的情况下，代码变得更加混乱了，个人觉得在工程化思想比较强的团队中使用setup确实能更好的使用模块化开发，但是用得不好的话也确实降低了代码的可读性。本篇文章是从使用角度来聊聊s

{ "vue2-template": { //模板名称 "prefix": "vv", //触发条件 "body": [ //内容 "", "", "", " ", " ", "", "", "", "" ], "description

一、写在前面 说来还是比较惭愧的，从周二开始事就比较多，周三还电脑坏了，然后修电脑等等一些杂事，忙的团团转，因为周二、周三自己走的过多了，导致不敢直腰，周四卧床一天。 之前都听说《陈情令》特别火，肖战和王一博正是因为这部剧火的，而大多数人，也因为这部剧，被肖战和王一博圈粉。 而我可能

在最早之前，我做过纯静态的项目引入vue当作模板引擎，就是那种没有任何打包压缩的项目，就是单纯的引入css、js、html的项目。现在应该是很少有这样的项目了，很少不代表没有，起码我现在在撸jq的项目（现在jq贼溜）。 如果习惯了.vue文件去开发，有人就会想要直接用.vue文件当作组件。虽然

组件代码 <template> <div :style="divStyleInternal"> <label class="left-label" :style="lStyle">{{ label }}</label> <div class="inline" :style="sStyle"> <el-toolt

Vue3 NProgress进度条 安装插件： yarn add nprogress app.vue中引入插件。 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 监听路由跳转 进入页面执行插件动画。 路由跳转中 router.beforeEach((to, from, next) => { // 开启进度条 NProgress.start

defineProps 获取组件传值 <template> <h1>{{ msg }}</h1> <div @click="clickThis">1111</div> </template> <script setup lang="ts"> defineProps<{ // 采用ts专有声明，无默认值 msg: string, num?: numb

VUE3中实现刷新 provide ： 向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值 inject ： 接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称 通过依赖注入（provide和inject）实现自定义页面刷

Vue3刷新浏览器恢复Vuex 由于Vuex的数据是存储在内存中的，当浏览器刷新时，Vue实例会重新加载，原本存在的Vuex数据将会丢失。这其中可能包含一些必要的认证信息，使得站点需要重新登录， 封装sessionStorage sessionStorage 用于临时保存同一窗口(或标签页)的数据，在页面刷新时数据不会删除

目录 前言 Suspense【试验性，可能变动，生产环境请勿使用】 实例：有一个组件的一些数据需要异步请求，请求完成后再渲染。为了显示优化，我们会在请求返回前显示一个Loading。 vue2实现 vue3-suspense 实现 注意事项 Teleport【传送】 实例： 实现一个点击按钮做 inx++，并展示出inx的功能

vue3封装storage实现token验证 验证思路 1 登录成功返回 token 2 拿到token，将token存储到localStorage，并跳转路由页面 3 跳转路由，就判断 localStroage 中有无 token 4 调后端接口，都要在请求头中加token 5 前端拿到状态码为401，就清除token信息并跳转到登录页面 storage封装 localSt

TypeScript 是JS的一个超集，主要提供了类型系统和对ES6的支持，使用 TypeScript 可以增加代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看， Vue3 的源码就是用 TypeScript 编写的，更好的 TypeScript 支持也是这一次升级

好家伙, 来一波核心概念:数据劫持是响应式的核心  1.由set up开始 (1)vue3中的一个新的配置项,值为一个函数. (2)组件中所用的到的:数据,方法,计算属性均要配置在set up中. (3)set up函数的两种返回值:1.若返回对象,则对象中的属性,方法可以在模板中直接使用, 　　　　　　　　　

前言 记一次前端vue3的单元测试之Hello world，满足一下自己的晚期强迫症需求。 Note：本次环境为vue3 + typescript，使用jest作为测试工具，似乎和vite没啥关系。 1. 安装单元测试必要软件包 npm install -D babel jest @vue/test-utils @babel/preset-env @babel/preset-typescr