樊小书生

做大屏的时候经常会遇到 echarts 展示，下面展示在 Vue2.7 / Vue3 中对 echarts （^5.4.0） 的简单封装。文章首发于https://blog.fxss.work/vue/echarts封装.html，样例查看如下演示 echarts 封装使用：可以将如下代码拷贝到项目运行，更方便查看效果

但 vue-router 3.6.5 和 vuex 3.6.2 版本并不支持组合式API的写法，这个时候需要对 vue-router 和 vuex 做兼容处理，以便使用组合式API。要在 vue devtools 查看页面中的内容信息，需要将 vue devtools 升级到 6.2.0 以上版本。经过测试，两者功能均正常，但是在组合式API中 vuex 的。也就是当前安装 Vue 2.7.14 版本，支持。辅助函数是无法使用的。

签字板 主要适用于 电子签名，比如购买贵重物品的时候，可能就需要使用电子签名。使用效果可点击查看，可以直接在上面进行手动签名，拿到签名信息后保存到服务器端。signaturePad 组件放置于 ，在需要使用的组件中局部注册使用。通过 `ref`` 可以获取到 SignaturePad 实例并调用实例方法。......

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。本文是使用 vuepress 搭建类似于 vant 文档，右侧带有移动端展示。先看下成果：shop-m使用文档 ，左侧是文档，右侧带有移动端展示，且会根据不同的文档页面，移动端跳转到对应的页面展示。VuePress自定义VuePress 提供的默认主题就挺好的，我们使用 布局插槽 来完成我们的功能。默认主题的 L

最近看完 Vue3 和 Vite 文档之后，就写了个小 demo ，整体感觉下来还是很丝滑的。Vue3Vite中文网Element PlusVue3 相关的script setup首先说说组合式API，将对同一块操作的变量函数等放在一起，比如说搜索功能，将和搜索相关的功能集中一块（写出了以前写jQuery的感觉）。其二在 script setup 中提供了另一种代码复用的写法，将代码逻辑封装，例如某个请求，在 script setup 中导入直接调用，返回对应的数据， script set

最近使用ant-design-vue，在使用select的时候遇到一些特殊情况，特此做一下整理汇总。首先实例中的下拉选中为：const options = [ { name: '北京', id: '00001', spell: 'beijing', simpleSpell: 'bj' }, { name: '上海', id: '00002', spell: 'shanghai', simpleSpell: 'sh' },

Sentry账号及SDK语言选择注册账号：https://sentry.io/for/vue/选择平台：Sentry通过官方的Sentry SDK与许多不同的语言和平台集成。本项目选择 Vue 。安装Sentry SDK安装Sentry的浏览器JavaScript SDK：@sentry/browser : yarn add @sentry/browser 或者 npm install @sentry/browser ，之后@sentry/browser 将报告通过应用程序捕获触发的任何异常

在使用 Element 表单的时候，验证数字是很正常的需求。Element的表单验证用的是 async-validator ，查看可以设置 type 来进行验证 number ，我最初使用的如下：rules: { ... count: [ { type: 'number', message: '请输入正确数据', trigger: 'blur' } ], ...}count ...

在Vue项目中，为了提升性能缩短首页的白屏时间（更具体的白屏时间可查看Web 性能优化-首屏和白屏时间），我们可以通过将公共库采用CDN引入的方式以及将资源文件压缩的方式。关于 配置CDN及Gzip 之后可从以下3个链接进行体验，在 Chrome 开发者工具 Network 中勾选 Disable Cache：未配置CDN及Gzip：https://www.fxss.work/authorityRouter配置CDN但未配置Gzip：https://www.fxss.work/authorityRo

本文章主要介绍在全局混入、多个混入情况下初始化渲染的生命周期、更新生命周期以及销毁的生命周期。项目地址：vue-lifecycle演示地址：vue-lifecycle目录说明src/mixin 目录下放的是不同组件或者页面的混入。文件说明allMixin.js为全局混入appAMixin.jsapp.vue 的 AMixinappBMixin.jsapp.vue 的 BMixinhomeAMixin.jsHome.vue 的 AMixinhome

在做后台管理系统的时候，一般都会遇见路由权限的问题。大家可以先体验一下最终的例子 authority vue Router ，例子项目地址 authorityRouter。在例子的登录页面中，通过选择不同的用户类型来模拟不同的用户账号登录的情况，通过不同的用户类型登录后台的时候，可以看到左侧的 menu 菜单是不同的，只有当有权限的时候才可以进行查看，并且当手动输入的时候都会直接到404页面。...

创建项目npx create-nuxt-app <项目名>详情查看 安装-NuxtJS安装vantnpm i vant -S引入vant这里采用的是： 导入所有组件在根目录的 plugins 目录下创建 vant.js ，内容如下：import Vue from 'vue'import Vant from 'vant'import 'vant/lib/index...

一般写博客都采用md格式，快捷方便，但是写好之后为了方便查看，我们需要将md格式的代码解析。markdown-it本示例中采用的是markdown-it来解析md格式的代码。highlight.js本示例中采用的是highlight.js来进行代码高亮显示。但是highlight.js不支持行号，这会导致代码看起来不方便，本示例结合给博客的highlight.js添加行号和行号高亮中的方...

先来简单看个例子：TodoList.vue :<template> <ul> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item"...

获取浏览器滚动条宽度，一般用于弹出层的时候，设置body的右边距，防止overflow: hidden的时候元素抖动。scrollbar-width.jsimport Vue from 'vue';let scrollBarWidth;export default function() { // 如果是服务器端渲染，则浏览器滚动条的宽度为0 if (Vue.prototype....

isServerconst isServer = Vue.prototype.$isServer;Vue.prototype.$isServer表示当前是否是在服务器端渲染，例如使用 create-nuxt-app 创建的项目中，在 page/index.vue 的 created 生命周期中添加 console.log(this.$isServer) 服务器端打印出来为 true 。ie...

首先先说一下标题，此处的重新（刷新）并不是浏览器 reload ，只是当前页面组件重新 create 。最近重构的项目中有重新加载的按钮，以前直接是 location.reload() ，但现在重构为了单页面方式，这个在 location.reload() 的话那体验就太 low 了，刚好前段时间看了花裤衩大佬的 手摸手，带你用vue撸后台 系列五(v4.0新版本) ，仔细思考之后不得不说这个...

在大表单如果内容有修改，在返回其他页面的时候可以提醒 “是否需要保存您所做的更改？” ，在vue中，一个一个字段监听改变太麻烦，那么有没有简单一点的方案呢？答案是有的：我们可以使用 watch 。watch 中有个 deep 选项，为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。例如：export default { data() { return {...

项目中如果需要换肤，黑白配的话还好说，就两种皮肤，稍微整整就好了，这次直接来了8套皮肤，这就有点渗人了，必须想办法偷偷懒了，开发环境也要好好琢磨一下了。Element 有提供多种的换肤方案，但我们项目中用的是 less ，所以只能用 命令行主题工具 了，但是我们的设计图有些和 Element 还不同，还需要去改样式，不是简单的命令行主题工具就能搞得定的，但命令行主题工具肯定是要用的。基于上面的...

新项目每次都需要去配置一个新的开发环境，索性直接搭一个模板，为以后快速开发使用。项目地址：vue-cli-vant-startervue-cli 和 vant 结合的项目开发模板，主要内容如下（后续新增的内容会在其后使用方括号标识添加时间）：将 axios 或者 $axios 添加到 Vue.prototype ，对 axios 的封装是基于 vue-cli-plugin-axios 插...

新项目每次都需要去配置一个新的开发环境，索性直接搭一个模板，为以后快速开发使用。项目地址：vue-cli-element-startervue-cli 和 element 结合的项目开发模板，主要内容如下：将 axios 或者 $axios 添加到 Vue.prototype ，对 axios 的封装是基于 vue-cli-plugin-axios 插件。对 axios 的拦截器进行配置...

以下配置仅适用于vue cli3。在前后端分离的项目中，一般在开发过程中，前端应用是在本地localhost运行的，但此时 API 接口在其他主机上，这是进行 API 请求的时候就会产生跨域问题。这个时候你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。用法也很方便：第一步首先需要确定你是否安...

今天观看学习Element的源码，看到textarea有一个自适应高度的属性，毕竟以前也接触过这方面的问题，所以就好奇看一下它是怎么实现的。

最近学习了一段时间Vue，把文档看完之后有点懵懵懂懂，不过刚好赶上Element和iView等应用Vue编写的框架，就先看完文档，然后看了Element的源码，来巩固自己对Vue的见知。