四、Array 数组操作函数2：获取部分数组片段（不改变原数组）1，随机获取部分元素sampleSize 方法可以从数组中获得 n 个随机元素 _.sampleSize([1, 2, 3], 2); // => [3, 1] _.sampleSize([1, 2, 3], 4); // => [2, 3, 1] 2，获取数组部分片段（通过选择的方式）（1）take 方法创 ...

四、Array 数组操作函数1：查找指定元素、或索引1，随机获取一个元素sample 方法可以从数组中获得一个随机元素。_.sample([1, 2, 3, 4]); // => 2 2，查找指定元素（1）find 方法可以遍历数组元素，返回 predicate（断言函数）第一个返回真值的第一个元素。_.find(users, function(o) { return o.age &l ...

三、String 字符串操作函数1，将字符串转换成驼峰命名camelCase 函数可以将字符串中非数字和字母的字符都过滤掉，然后再转换为驼峰。console.log(_.camelCase('Foo Bar')) // => 'fooBar' console.log(_.camelCase('--foo-bar--')) // => 'fooBar' console.log(_.c ...

二、使用 throttle 函数实现节流1，throttle 节流throttle 函数原型如下。它会创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。_.throttle(func, [wait=0], [options={}]) （1）throttle 的功能和前文介绍的 debounce 很像，都是为了防止某个方法被频繁调用。不同的是，throttle 可以指定每隔多长时 ...

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。同时其在 npm 每天下载量都超过 200 万，足以证明了它受欢迎的程度。 一、使用 debounce 函数实现防抖1，安装配置（1）这里假设我们需要在 Vue.js 项目里使用 L ...

在 vue 项目中，我们通常会使用 Axios 库来与后台进行数据交互。而当我们发起 ajax 请求时，常常需要在页面上显示一个加载框（Loading 效果），然后等数据返回后自动将其隐藏。要实现这个功能，我们可以在每次请求前手动显示个加载框，等收到数据后又将其隐藏。但如果每个请求要都这么做，就略显麻烦。 下面通过样例演示如何封装一个带 loading 效果的 Axios 组件，它能够对请求和响应 ...

默认情况下 Vue.js 是不支持 Sass、SCSS 的，如果想要使用它们，只需要一些简单的安装配置即可。 1，安装依赖包（1）进入项目文件夹，执行如下两个命令安装相关的依赖包。 npm install --save-dev sass-loader npm install --save-dev node-sass （2）接着编辑 build 文件夹下的 webpack.base.conf ...

有时我们需要在页面上展示 json 数据，如果直接显示出来效果不太好。下面演示如何在 Vue.js 项目中创建一个专门的 Json 数据格式化组件，并使用它进行展示。1，效果图（1）JsonView 组件会自动对 JSON 数据进行格式化显示，同时具有语法高亮效果。（2）同时点击节点头部的三角箭头，还可以对该节点进行展开、折叠操作。 2，组件代码（JsonView.vue）<templat ...

三、网格布局框架1，grd.css 介绍（1）Grd是一款基于Flexbox的CSS网格系统框架。通过这个CSS网格框架，我们可以在页面中进行各种形式的网格布局。它默认采用和Bootstrap相同的12列布局。（2）Grd是轻量级框架，代码如下：注意：我这里对其原始代码进行了改进，在原有的横向布局基础上，增加了纵向布局（column）的样式。.Grid{display:flex;flex-wrap ...

三、网格布局框架1，grd.css 介绍（1）Grd 是一款基于 Flexbox 的 CSS 网格系统框架。通过这个 CSS 网格框架，我们可以在页面中进行各种形式的网格布局。它默认采用和 Bootstrap 相同的 12 列布局。（2）Grd 是轻量级框架，代码如下：注意：我这里对其原始代码进行了改进，在原有的横向布局基础上，增加了纵向布局（column）的样式。.Grid { display: ...

子菜单的展开、收缩功能在许多系统上都很常见，如果想要在打开收起时带有动画效果，过去常常会通过 jQuery 实现。而在 Vue 项目中，我们可以单独封装一个动画组件，方便使用。 1，效果图 点击一级菜单时，子菜单会从上往下逐渐展开。 再次点击一级菜单，子菜单又会从下往上收起。 2，创建动画组件（collapseTransition.js）组件代码如下，其内容是通 ...

一、CSS reset（样式重置）1，什么是 CSS reset？（1）HTML标签在浏览器中都有默认的样式，但是不同的浏览器的默认样式存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。（2）开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉， ...

二、CSS 通用样式库1，基本介绍（1）所谓CSS通用样式库就是可以在任何网站使用的CSS样式库。通过对样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。（2）通过样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大，同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。2，通用样式库下面是我整理的一个比较好用的通用样式库（li ...

1，问题描述最近发现使用npm run build命令打包项目一直失败。报如下错误：MacBook:eciothangge$npmrunbuild >eciot@1.0.0build/Volumes/BOOTCAMP/Vue/eciot >nodebuild/build.js ⠋buildingforproduction.../Volumes/BOOTCAMP/Vue/eciot ...

1，问题描述（1）element-ui自带了一套常用的图标集合，使用起来十分方便。最近发现当Vue.js项目中使用element-ui图标时，如果使用npm run dev方式启动，图标是显示正常的： （2）而一旦使用npm run build编译打包后发布到服务器上，会发现图片显示不出来（Chrome浏览器下显示方块）。（3）查看网络请求可以看到如下两个字体文件加载不到：http://local ...