前端探险家的博客

在项目中创建一个watermark.js文件，封自定义自定的方法，这个文件不需要修改可以直接复制粘贴使用，当然可以根据自己的水印样式需求，去修改文件中的属性设置；// 生成包含水印文本的图片方法// 创建canvas元素// 设置canvas宽度// 设置canvas高度// 获取2D绘图上下文${// 生成包含水印文本的图片方法 function generateWatermark(text , fontSize , color) {

vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；

我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块，有大有小的散落着，看着挺好看的；也许项目中也会涉及到显示一些关键词之类的需求，这个时候也可以用词云库（echarts-wordcloud）来实现；echarts-wordcloud是基于echarts的一个词云库，但是在echart官网中的配置相中却没有关于他的介绍，下面我们就来一起慢慢探索并能手到擒来的使用它；1.下载图片首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是矢量图，并且最好为黑色填充，当然其他颜色也行。

把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！

当时听了这个需求，我就很不解，这数据都是不确定的，咋展示，如果只展示一个月的数据还可以，然后通过按钮去选择月份渲染，展示一年的数据，就有点小复杂啦；12个月，按10个项目，正常数据应该有120个，这里只有81个，就是所有有值的柱子的集合，把值为0的已经过滤掉，不显示，这样就不会炸图表中占位；图表上的数据也是自己随意mock的，由于柱子数量布丁，颜色也是随机的，这些都不要在意不要，重点是图表的实现；X轴数据那么多，还不确定，只能看卡能不能实现滑动，结果还真能，那就好办啦，1.X轴鼠标滑动或者缩放、

之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {

产品需求：后端不想写下载，导入和导出的接口，让我们前端自己实现。这里我们就可以用xlsx插件来实现，我们不多说了，先放一下实现的图片，下面我们分别把模版下载、导入和导出的代码放上来，想用的话，直接复制粘贴即可！模版下载图片导出图片：好了，下面我们就直接上代码！

详细的后台管理架构，项目运用了Vue2所有全家桶技术，包括Vue-Router，Vuex，mock.js，axios，Echart.js，antv-g6，tinymce，swipe等技；其中包括两个数据可视化大屏展示，用到各种各样的图表展示；

关于Vuex3状态管理的所有知识点，包括Vuex的工作原理和流程，Vuex的安装和使用，有详细代码可以参考；

Vue-Router一. 前言二. 对SPA应用的理解三. 后端路由和前端路由四. 项目中路由基本使用五. 路由传参六. 路由守卫七. history模式和hash模式的区别一. 前言说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑；我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系；而多个路由（route）是由路由器（router）管理的，这就是两者的关系；生

报错可能是以下原因安装命令错误（低级错误）未安装node环境或node版本不匹配未删除之前版本脚手架相关缓存（我遇到的问题）安装命令错误（低级错误）Vue CLI 的包名称由 vue-cli 改成了 @vue/cli//旧版本安装命令：npm install -g vue-cli//新版本安装命令：npm install -g @vue/cli未安装node环境或node版本不匹配首先安装vue/cli前，首先先检查其电脑是否安装node,打开cmd输入一下命令：node -v如有

Vue实现响应式数据的核心API是Object.defineProperty。其实默认Vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作。这里，用一张图来说明Vue实现响应式数据的流程：1.初始化用户传入的data数据这一步对应源码src/core/instance/state.js的 113行function initData

Vue响应式原理什么是响应式理解响应式Vue通过Object.defineProperty知道数据发生了改变Vue通过依赖收集去更新视图Vue通过依赖更新时去更新视图Vue响应式原理总结什么是响应式在 Vue 实例中声明过的数据，这些数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。理解响应式Vue是如何追踪变化得呢，那么我们就要弄懂以下三个问题：Vue是怎么知道数据发生了改变？Vue是怎么知道去更新哪些视图？Vue是怎么知道在什么时间更新视图

抽周末时间，没事看看Vue的官网，也顺便做了一下Vue2.x基本知识超详细的思维导图，大家可以保存起来，一图在手，天下我有，Vue2.x进阶知识的思维导图等哪个周末闲了再弄！如果对你有用，记得点赞哦，谢谢！...

首先描述一下我们经常在项目中遇到的需求：比如我们要写一个弹窗，弹窗里显示的是表单内容，但是表单内容会根据进入前选择的状态不通显示的表单内容不通，也就是说，这个弹窗里面有5个不同的表单在各自状态下子在弹窗中渲染，这个时候我们就需要封装一个组件，但是组件不能是死的，我们要通过is名称来动态的切换组件显示；写两个表单组件hive详情表单组件<template><div class="hive_control"> <!-- Oracle弹窗内容 -->

Vue除了核心功能默认内置的指令 ，Vue 也允许注册自定义指令。自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。写一个自定义指令的两种方式：全局指令： 通过 Vue.directive() 函数注册一个全局的指令。局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。创建全局指令：需要传入指令名称以及一个包含指令钩子函数的对象，该对象.

这里写目录标题对MVVM的理解？Vue数据双向绑定原理Vue的响应式原理vue中组件的data为什么是一个函数vue中created与mounted区别Vue中computed与method的区别Vue中watch用法详解Vue中常用的一些指令说说vue的生命周期对MVVM的理解？MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewMode

Vuex的主要核心概念一.Action1.1Action的自我介绍1.2组件触发Action中的异步函数1.3组件触发Action异步时携带参数二.Getter2.1Getter的自我介绍2.3组件访问Getter的数据一.Action1.1Action的自我介绍Action用于处理异步任务如果通过异步操作变更数据，必须通过Action，而不是使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。Action 提交的是 mutationAction 函数接

Vuex的主要核心概念一.State1.1State的自我介绍1.2组件访问State中数据的方式第一种方式：$store.state.数据名第二种方式：mapState 辅助函数1.3组件通过哪些方式改变State中数据二.Mutation2.1Mutation的自我介绍2.2组件通过触发Mutation来改变数据2.3组件触发Mutation时传递参数一.State1.1State的自我介绍State提供了唯一的数据公共源，所有共享的数据都要统一放到store的state进行存储；import

再次学习Vuex并记录下来，方便日后的复习和理解！！！1.先看组件之间共享数据的方式又哪些父向子传值：父组件通过v-bind属性绑定，子组件props接收子向父传值：子组件通过$emit传值，父组件通过v-on事件绑定接收兄弟组件传值：EventBus $on 接收数据的组件 $emit 发送数据的组件以上方法虽然可以解决一些组件之间的数据共享，小范围组件之间还可以，一旦涉及到多人开发的大项目和大范围组件之间数据共享就不太方便，所以我们就不得不再认识个新朋友（Vuex）来帮助我们。2.V

老样子，先来个效果图

实现效果如下图：在前面写了一个 vxe-table的插件，一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等），也帮到了很多人解决工作中的问题，挺开心的；都说条条大路通罗马，同样的功能有很多实现方式，今天我们就一起看一下利用element-ui的表格和表单结合实现的可编辑表格，主要是记录一下自己用到的知识点，如果可以帮到你，我也很荣幸！第一步：项目引进element略，既然看到这里了，想必项目已经引入element-ui,也会怎么做，如果不会可以看 element-ui 官网.

this.$router.push进行编程式路由跳转传参router中路由配置组件home点击传参组件homeDetails接受参数router中路由配置 { path: '/homeDetails/:id',//要传递的参数前面加： name:'homeDetails' component: () =>import ('@/views/home/homeDetails.vue'), //子路由的绝对路径 },组件home点击传参// 例如表格中点击表名称跳转新页

vue中路由的几种传参方式router-link 进行页面按钮式路由跳转传参router中路由配置父组件home点击传参子组件homeDetails接受参数router-link 进行页面按钮式路由跳转传参router中路由配置 { path: 'homeDetails/:id',//要传递的参数前面加： name:'homeDetails' component: () =>import ('@/views/home/homeDetails.vue'), //子路由的绝对

mixinsvue中提供了一种混合机制–mixins（混合），用来更高效的实现组件内容的复用。mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。mixins理解组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组

之前遇到一个问题：就是做下载excel表格功能时，不知道怎么把后端返回的文件流转化成表格数据，上网看了很多方法，可能自己没有找对吧，确实可以实现下载，但是下载的表格内容是乱码，个人感觉应该是实现下载函数方法写错了，现在实现了，先记录一下，为了方便日后自己的学习。上图就是调取后端接口成功后返回的文件流；接下来我们就一步一步实现下载excel表格的功能，写这个主要是为了自己的学习和记录，如果对你有帮助，我也会很开心，如果有什么不对的，也可以帮我指出错误。第一步：先写接口函数（以我的代码为例）respo

淘宝弹性布局lib-flexiblelib-flexible并不单独使用，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem，在项目中还是按照设计稿写上对应的固定像素（px）就行。移动端适配的具体步骤第一步：安装插件 lib-flexiblenpm i lib-flexible --save-dev第二步：安装px2rem loadernpm install px2rem-loader --save-dev第三步：在main.js中引入lib-flex

人狠话不多，上图！pinyin-match

开门见山看效果图，看是不是你想要的vxe-table（先来看看这个强大组件是什么样子）一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…git地址：vxe-table.vxe-table组件地址：点击查看发现新大陆，建议收藏，留着备用.组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！但是呢，既然分享这个组件啦，

人狠话不多，先上效果图！以上都是在项目中经常使用到的图标，地图的引入下一期会特别介绍！echarts中文官网官网链接点击查看：ECharts其实官网中有在项目中使用的详细步骤，大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。echarts在vue项目中实现的步骤webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。

###开门见山，先上动态效果图！后期补上之前公司的官网都是静态页面，突然产品和运营要重新改动官网，并要求页面在滑动的过程中需要出现一些动态效果，作为很久不用css3的小白，也把它忘的差不多啦，于是就开始百度有没有一些动画库，所以我就发现了Animate.css ——一款强大齐全的css动画库，和wow.js 插件。###Animate.css这是git仓库链接，具体了解可点击Animate...