在vue-cli中引入lodash.js并使用

在vue-cli中引入lodash.js并使用

• lodash是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数。
• 中文文档： https://www.lodashjs.com/docs/4.17.5.html
• lodash的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据而不改变原有数据
• 模块的组成：
  • Lodash 提供的辅助函数主要分为以下几类：
    Array，适用于数组类型，比如填充数据、查找元素、数组分片等操作
    Collection，适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
    Function，适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
    Lang，普遍适用于各种类型，常用于执行类型判断和类型转换
    Math，适用于数值类型，常用于执行数学运算
    Number，适用于生成随机数，比较数值与数值区间的关系
    Object，适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
    Seq，常用于创建链式调用，提高执行性能（惰性计算）
    String，适用于字符串类型
• 常用方法：（有很多，可查看文档）

  1. times：循环N次
     _.times(5, function(){ // ... });

  2. cloneDeep：深度克隆JavaScript对象
     var objB = _.cloneDeep(objA);

  3. random：在指定范围内获取一个随机值
     _.random(20); // 返回 0 到 20的随机数 _.random(15, 20, true); // 返回 15 到 20的浮点型随机数;

  4. assign：扩展对象

     var objA = {"name": "colin", "car": "suzuki"};
     var objB = {"name": "james", "age": 17};
     
     _.assign(objA, objB););
     

  5. omit：从对象中删除属性

     var objA = {"name": "colin", "car": "suzuki", "age": 17};
     bjA = _.omit(objA, ['car', 'age']); // {"name": "colin"}
     

  6. forEach：对集合中的元素进行遍历，调 用function （迭代函数）遍历 collection中的每个元素，function如果显式的返回 false ，迭代会提前退出。
     _.forEach(collection, function (value, index, collection){})

  7. map: 创建一个数组，value（值） 是 function（迭代函数）遍历 collection中的每个元素后返回的结果。某次迭代的返回值可能是null
     _.map(collection, function (value, index, collection){})

  			    
  			let arr = [
  			    {
  			       id: '1',
  			       name: '山有木兮木有枝',
  			       age: 23,
  			       createTime: '2018-12-12'
  			    },
  			    {
  			       id: '2',
  			       name: '心悦君兮君不知',
  			       age: 31,
  			       createTime: '2018-12-13'
  			    }
  			    // 其余省略
  			    _.map(arr, 'id')    // => [1, 2]  //只用到id
  

  8. find: 返回 function（断言函数）第一个返回真值的第一个元素。如果没有匹配元素返回undefined

     _.find(collection, function (value, index, collection){})
     
     var users = [
       { 'user': 'barney',  'age': 36, 'active': true },
       { 'user': 'fred',    'age': 40, 'active': false },
       { 'user': 'pebbles', 'age': 1,  'active': true }
     ];
     
     _.find(users, function(o) { return o.age < 40; });
     // => object for 'barney'
     
     _.find(users, { 'age': 1, 'active': true });
     // => object for 'pebbles'
     
     _.find(users, 'active');
     
     // => object for 'barney'
     

• 在vue里面使用lodash.js
  下载: npm i --save lodash,在package.json中显示，则表示下载成功
  在main.js中使用：
  import _ from "lodash";
  在页面中使用： let data = _.cloneDeep(this.userInfoData)
  在项目中使用：

    roleAll.post({projectCode:projectCode,organizeId:organizeId}, this).then(res => {
        if (this._.isArray(res)) {  //判断后端返回的数据类型
          //console.log(res)
          this.roleARR = res
        }
      })

• webpack按需打包lodash.js

1. 下载：

   npm install lodash --save
   npm install lodash-webpack-plugin babel-plugin-lodash --save-dev
   

   第二行的部分插件 webpack 模板已经默认安装

2. 修改 .babelrc
   plugins 中添加 lodash，我的项目添加完如下：
   "plugins": ["transform-vue-jsx", "transform-runtime", "lodash"]

3. 修改 webpack.prod.config.js
   由于我只需要打包时体积小即可，所以添加到这个配置文件中

   const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
   
     // 省略
     plugins: [
       new LodashModuleReplacementPlugin(),
       // 你的其他配置
     ]
   

• 补充： 如何在vue项目打包去掉console？
  在项目中的build/webpack.prod.conf.js文件中

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true
  },

添加此配置就可以在打包之后去掉控制台的打印输出