Wu hao's blog

本地 node 环境本地安装node从 node官网下载并安装 node，安装步骤只需一路 next即可，安装完成后，打开命令行工具输入 node -v ，若出现对应版本号则安装成功 。输入 npm -v，显示 npm 版本信息。切换到淘宝镜像当 node环境安装完以后，npm包管理工具也有了，但是由于 npm的有些资源被堵，为了更快更稳定，需要切换到淘宝的 npm镜像 cnpm 。输入 cnpm -v ，可以查看当前 cnpm版本进行安装是否成功验证 。npm...

概念：EditorConfig：主要用于维护多个编辑器和 IDE从事同一项目的多个开发人员的一致编码风格。EditorConfig项目包括一个用于定义编码样式的文件格式和一个文本编辑器插件集合，这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。ESLint：是 js的代码检查工具，在编写 js代码的时候，有些错误很难被发现，需要在运行的时候不断的排错；而且每个人的编写代码的风格不一致，这样造成了阅读对方代码的困难；因此我们需要 eslint在编写的过程发现错误，并统一风格。...

安装依赖安装 echarts和 echarts-gl依赖包 。npm i echarts echarts-gl -Sassets下新增 mapdata资源包（中国各省市 json文件）可以在网上自行查找下载，也可通过本文案例链接，在码云上拉取获得 。完整示例链接https://gitee.com/wu241617/echarts-mapassets下新增 config目录，下新建 map.json文件我这里案例中只做了抚州市和荆州市的配置，后续有其他区域...

全局引入安装依赖npm install element-ui -Smain.js中引入全局完整引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);按需引入安装依赖npm install element-ui -S引入插件按需引入功能依赖于 babel-plugin-component 插件完成...

import Vue from 'vue';import VueRouter from 'vue-router';import config from '@/config';import store from '@/store';import routes from './routes';const { systemName } = config;Vue.use(VueRouter);// 获取路由白名单path合集const whiteNames = (routers) =>.

前言：vue项目中，在使用 element-ui导航菜单组件时，官方文档给出的示例，是已知菜单项静态写死的 。然而在日常开发中，要求从后端请求拿到菜单数据，再由前端去实现菜单的动态渲染生成 ，这里对具体实现过程做一个总结 。vuex中存放Menus，模拟后端请求到的数据import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { ...

前言：在日常项目中，会遇到页面顶部要求有路由标签的需求，基本功能要求，标签新增，关闭，拖拽，刷新，点击页面切换，长度超出内容滚动等 。上篇文章是使用 vue-router-tab插件去实现，本文不涉及插件，使用vue基础语法实现 具体需求。新建项目，安装基础依赖 （脚手架创建）项目创建：这里使用vue-cli3.x的 ui面板去创建，项目中除了安装默认依赖项（babel，eslint）之外，还需安装 vue-router和 vuex ，后续项目基于此进行。store...

前言：在日常项目中，会遇到页面顶部要求有路由标签的需求，基本功能要求，标签新增，关闭，拖拽，刷新，点击页面切换，长度超出内容滚动等 。在 vue项目中考虑使用vue-router-tab 插件去实现改需求，下面对其用法做相关示例 。安装依赖 （官方推荐 yarn）npm i vue-router-tab -S// 或者cnpm i vue-router-tab -S// 或者yarn add vue-router-tab main.js中全局引入// 引入组件和样式，ro...

前言：在日常项目开发中，会碰到把一段文本或是代码进行按钮点击复制的需求 。在 vue中考虑使用clipboard （剪切板插件）去实现 ，下面对主要用法做一个示例 。安装依赖npm i clipboard -S// 或者cnpm i clipboard -Scopy函数copy() { let clipboard = new Clipboard('.link') clipboard.on('success', e => { console.log('复制成功')...

前言：在 vue 和 element-ui项目中，有点击按钮预览 PDF文件需求，要求支持 PDF的预览，上下页切换，放大缩小，顺时针和逆时针旋转等功能 。这里选择使用 vue-pdf 插件去实现，以下是对其相关用法的总结 。安装依赖npm i --save vue-pdf// 或者cnpm i --save vue-pdf 组件页面中引入并注册// 引入import pdf from "vue-pdf"export default{ // 注册 c...

vue-quill-editor相关使用前言：如何实现嵌入富文本编辑器，让用户编写文章的需求 ？在 VUE项目中，选择使用轻量化的 vue-quill-editor插件去完成实现 。这里主要对其使用过程，样式优化做一个总结 。项目中安装依赖npmnpm i --save vue-quill-editorcnpmcnpm i --save vue-quill-editor组件中引入插件// 引入 vue-quill-edito 组件import { quil...

页面表格数据导出为 excel表安装依赖（xlsx和 file-saver）npm i --save xlsx file-saver在使用导出功能的页面引入插件import XLSX from 'xlsx'import FileSaver from 'file-saver'导出方法 （绑定为导出表格按钮的点击事件）//定义导出Excel表格事件exportExcel() { let xlsxParam = { raw: true } // #table 为要导出的...

Bus的使用概念：vue 中非父子组件之间通信除了使用vuex，也可以通过 bus 总线，两者适用场景不同。bus 适合小项目、数据被更少组件使用的项目，其实就是一个发布订阅模式，利用 vue 的自定义事件机制，在触发的地方通过 $emit 向外发布一个事件，在需要监听的页面，通过 $on 监听事件。vue2中使用方法：1，构建 bus.js 文件（位置，文件名称随意）import Vue from 'vue'export default new Vue()2，组件中...

使用原生 JS实现树形表格 ？请求本地 JSON文件获取数据 。问题：cors，跨域问题 。 解决：使用 jsonp方式，请求相关数据 。 注意：在 json文件中，json 数据使用 callback( json数据 ) 包裹，才能保持浏览器控制台打印出数据无报错。我这里回调函数是 getData( json数据 )。 代码： <script type="text/javascript"> /* getData 函数: JSONP 的函调函数，解决跨域问题。请...

Vue源码 ---变化监测Object数据实现变化监测数据可观测：知道什么时候数据被读取和改写 。vue 中对象数据实现数据可观测，基于Object.defineProperty方法去实现 。对象单个属性设置为可观测let obj = {}let val = 'wuhao'Object.defineProperty(obj, 'name', { enumerable: true, configurable: true, get(){ console.l...

前言：在使用 Element UI组件库中的跑马灯组件时，需求是三列卡片轮播的实现。虽然 Element UI中跑马灯组件提供了 type='card'属性，去设置轮播为卡片类型，但是样式不是我们所期待的，不想要缩放效果，于是便对跑马灯组件源码进行调整。源码调整位置分析通过分析，跑马灯组件主要是 carousel和 carouselItem组件。可以单独把源码中的这两个组件文件复制一份进行修改。更改后的 carousel文件。<template> &lt...

vue中在子组件中触发，父组件或其他组件。解决思路：在所触发的组件上绑定 :key="timer",更新 timer值，从而动态触发所有已绑定的子组件。实例解析：再此实例中组件 Progress和HjcqTable绑定 :key="timer"属性，当改变日期值时如何重新加载组件（重发请求，数据变更）。具体实现：在改变日期值的getDate函数中，this.timer = new Date().getTime()动态触发所有已绑定的子组件。<templ...

什么是 DNS ？DNS：域名解析系统，把对应域名转换为 IP 地址，由名称解析器（resolver），域名空间（domain name space），名称服务器（name server）三部分组成。域名组成：[ 主机名 ].[ 二级域名 ].[ 顶级域名 ]。DNS 查询过程 ？思考下，DNS 是怎么通过域名来查出 IP 的呢 ?（www.example.com为例）检查浏览器缓存。 检查操作系统缓存，常见的如 hosts 文件。 检查路由器缓存。 如果前几步都没没找到...

前言 ：在学完基础的 html（html5），css（css3），js（es6） 等基础后，我们可以利用已有的知识去做原生开发。但是为了提高开发效率，可能会去学习一些方便操作 DOM，而封装的库或者框架，如 jQuery 等，还有一些 UI 组件库或框架，如 Bootstrap，Element-UI 等。如果你觉得操作 DOM 比较繁琐，那么就可以去了解比较流行的 react 和 vue 等前端框架。这些框架，它的核心是，数据响应式，实现了操作数据化，废弃了之前操作DOM的繁琐的任务。还有就是我们今.

用了 Vue 框架，还需要做优化 ？目前最火的前端框架 Vue，它通过数据双向绑定和虚拟 DOM 技术，数据响应式等。让我们不用再去直接操作 DOM。但是在 Vue 项目里，任然存在着项目首屏优化，Webpack 编译配置优化等问题，所以我们任然需要去关注 Vue 项目性能方面的优化操作，提高项目的性能，让用户有更好的体验感。应该从那些方面着手？优化的方式有很多种，这里总体上划分为三大类 :Vue 基础代码层面的相关优化 。 Webpack 配置层面的相关优化 。 基础的 We..

单页面应用（SPA） ：通俗点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html,css,js。所有的页面内容都包含在这个所谓的主页中。但是写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于PC端。多页面应用 （MPA）：一个应用中有多个页面，页面跳转的时候是整页进行刷新。单页面（SPA）和多页面（MPA）的对比 ：组成 ： SPA 一个外壳页面和多个页面片段组成。MPA 多个完整...

什么是 Vue 响应式 ？当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新。Vue 响应式怎么实现 ？官网说明 ：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部装换为 getter / setter 。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低

图片懒加载出现的原因 :有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个 1M 大小的图片，并发情况下，达到 1000 并发，即同时有 1000 个人访问，就会产生 1个G 的带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。懒加载原理 :一张图片就是一个<img&gt...

这篇文章是对于，在使用 element-ui 做项目时，所遇到的一些问题 :使用 el-cascader 级联器时，出现下拉列表过长 ：使用目标: 引入 el-cascader 级联器，实现数据分级下拉显示。出现问题：下拉列表太长，无法显示全局以及输入框的内容。产生原因：可能是由于 Element-UI 版本问题。解决方法：在全局样式表中插入的下面两种样式中的一种即可。/*第一种*/.el-scrollbar_wrap{ height: 200px;}/*第二种*/

这篇文章是，对于Vuex 核心概念和基础用法的一个总结： Vuex 是什么 ? Vuex : 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 使用 Vuex 统一管理状态的好处 ? 能够在 vuex 中集中管理共享的数据，利于开发和后期的维护； 能够高效的实现组件之间的数据共享，提高开发效率； 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步； 什么样的数据适合存储在 vuex 中 ?...

这篇文章是对于，如何在 Vue-cli3.x 项目中使用 sass 的具体步骤的一个小的总结 :Sass 概念 :Sass : 是一种 CSS 扩展语言，目前广泛地应用到 web 项目开发中，使用 sass 可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的 CSS 样式，可以说是样式中的“高级语言”。Sass在日常的开发中，是需要通过转换工具转成 CSS 再引入到HTML文件中，然而，在vue的webpack项目模板中，引入解释sass...

这篇文章是对于，在 Vue 项目中，使用第三方动画库 animate.css 步骤的一个总结: Animate.css 开源 CSS 动画库 : Animate.css 特点： 开源免费 ：基于 MIT 开源协议，被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。 使用简单 :只有一个 CSS 文件，引入后以类的方式进行调用，如果使用 jquery，则不影响原有程序架构。 文件小，响应快 :体积小巧，只有几十k的大小，...

这篇文章是对于 vue cli3 创建的项目中，使用 better-scroll 的具体步骤的一个总结：先附上 better-scroll 官方地址 :https://better-scroll.github.io/docs/en-US/guide/#getting-started better-scroll 概念 :BetterScroll 是一个插件，旨在解决移动端的滚动情况（已支持PC）。核心是受 iscroll 实现的启发，因此 BetterScroll的 API 总体上与 iscr...

这篇文章是对于 vue 项目中，怎样去使用 swiper 问题的总结 ，在使用vue cli3 创建的 vue 项目中，用到 swiper 滑动组件来实现一个轮播的效果；先附上 swiper 官网地址 :https://www.swiper.com.cn/swiper 概念 :swiper.js 是一款成熟稳定的应用于 PC端 和 移动端 的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为 2.x 版本和 3.x 版本、 4.x、5.x 版本，2.x版本支...

最近使用 vue-cli3 脚手架创建项目，并使用 eslint 作代码校验格式；这篇文章是对于使用 vue-cli3 创建的项目中，eslint配置问题的解决；关闭 eslint 的方法：vue cli2 创建的项目中，直接注释掉 package.json 文件中 eslint 的配置文件就可以了（以下是vue-cli的默认配置）"eslintConfig": {"root": true,////此项是用来告诉eslint找当前配置文件不能往父级查找 "env": {...

问题描述:​​​​​​​最近，使用 vue-cli 脚手架写前端项目，之前一直是使用 npm run dev 在8080端口上进行本地调试，没有问题是可以查看到具体的运行效果的。当使用 npm run build 进行上线打包，一开始是毫无头绪，什么都不懂，直接是就在命令行上敲下：npm run build 命令，结果就出现了问题。直接运行 npm run build 命令：编译没有出现任何的问题，也没有报错；之后在浏览器中运行生成的 dist 目录下的 index.html，出现了一片空白

Vue 组件通信父子组件之间的通信 ---> props（父传子）在vue中父子组件的关系可以总结为：props down , events up;-->父组件通过props向下把数据传给子组件props:["name","age"]; prop验证-->不满足类型会报错 props:{name:String,age:Number} ;<div id="box"> <h3>父子组件之间的通信-->props（父传子）&l..

Vue单文件组件 传统组件的问题和解决方案:全局定义的组件必须保证组件名不重复; 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\; 不支持CSS意味着当HTML和Javascript组件化时,CSS明显被遗漏; 没有构建步骤限制，只能使用HTML和ES5 Javascript,而不能使用预处理器（如Babel）; 针对传统组件的问题,Vue提供了一个解决方案-...

概念: Promise是异步编程的一种解决方案，从语义上讲，Promise是一对象。从它可以获取异步操作的消息;主要解决回调地狱问题。 异步调用 (JS层面): --->定时任务 --->Ajax --->时间函数 基础用法: -->实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务; resolve和rejec...