我是瘦子

发表于 | 阅读次数

  • 1.图表宽度需设置成 100%

  • 2.同页面多图表请用 addEventListener 方法监听窗体大小改变

1
2
3
4
5
6
7
8
9
// 监听窗口变化 - 只刷新最后一个图表,后定义的会覆盖前面定义的，只有1个生效
window.onresize = ()=> {
    EChart.resize(); 
};

// 监听窗口变化 - 多个图表同时刷新
window.addEventListener("resize", function() {                
	EChart.resize();           
});
我是瘦子

发表于 | 阅读次数

问题：[[0, 1], [2, 3], [4, 5]] -> [0, 1, 2, 3, 4, 5]？

方法一

利用 es5 的 arr.reduce(callback[, initialValue]) 实现

1
2
3
let arr1 = [[0, 1], [2, 3], [4, 5]];
let arr2 = arr1.reduce( (a, b) => a.concat(b) );
// arr2 [0, 1, 2, 3, 4, 5]
阅读全文 »
我是瘦子

发表于 | 阅读次数

例如：在webpack.base.config.js 文件中的别名配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict'
const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            '@views': resolve('src/views'),
            '@components': resolve('src/components'),
            '@core': resolve('src/core'),
            '@utils': resolve('src/utils')
        }
    },
}

WebStorm Windows setting：
File > Settings > Languages and Frameworks >JavaScript | Webpack

WebStorm MacOS setting：

WebStorm | Preferences | Languages and Frameworks | JavaScript | Webpack

配置如下图：
WebStorm 配置

我是瘦子

发表于 | 阅读次数

今天安装pm2碰到一个问题，使用 npm install pm2 -g 安装完成时，找不到 pm2 命令：

npm install pm2

在安装提示中可以看到 pm2 安装位置，此时我们只要使用以下命令将 pm2 放入系统路径下就可以了：

1
ln -s /usr/src/node-v12.13.0-linux-x64/bin/pm2 /usr/local/bin/
我是瘦子

发表于 | 阅读次数

加油

在家的日子不能出去玩，不能出去吃，的确是很不开心的，不过也是真的增加了好多空闲时间

与其在家呆着无聊，不如安安静静的学习一下

疫情期间，不管怎样，心态不能崩，武汉加油，中国加油

闲言少叙，现在我们就开始一起学习吧

优化是个好词

优化，就是加以改变或选择使优良，在工作当中是让提升效率的好办法。
当然，webpack 优化千千万，但我觉得这些就够了
首当其冲的，就是工作中那些用不到的样式，可能是由于历史遗留原因已经忘记哪些是没有使用的样式了，一一排查太过耗时费力了
于是，purgecss-webpack-plugin 和 glob 它俩就登场了，它的作用就是解决上面提到的问题，让我们来看看如何使用吧
插件千万个，安装第一步：

1
npm i purgecss-webpack-plugin glob -D
阅读全文 »
我是瘦子

发表于 | 阅读次数

NPM 源地址 ： https://www.npmjs.com/package/lowdb

用于Node，Electron和浏览器的小型JSON数据库。由Lodash提供技术支持

1
2
3
db.get('posts')
  .push({ id: 1, title: 'lowdb is awesome'})
  .write()

用法

1
npm install lowdb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');

const adapter = new FileSync('db.json'); // 存储到db.json文件中
const db = low(adapter);	

// 设置一些默认值
db.defaults({posts: [], user: {}}).write();

// 添加一个post
db.get('posts').push({id: 1, title: 'lowdb is awesome'}).write();

// 使用Lodash简写语法设置用户
db.set('user.name', 'typicode').write();

数据保存到db.json

1
2
3
4
5
6
7
8
{
  "posts": [
    { "id": 1, "title": "lowdb is awesome"}
  ],
  "user": {
    "name": "typicode"
  }
}

你可以使用任何 lodash 函数 _.get 和 _.find 简写语法

阅读全文 »
我是瘦子

发表于 | 阅读次数

Git 忽略规则

#此为注释 – 内容被 Git 忽略

  • .sample 　　 # 忽略所有 .sample 结尾的文件
  • !lib.sample 　　# 但 lib.sample 除外
  • /TODO 　　 # 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO
  • build/ 　　 # 忽略 build/ 目录下的所有文件
  • doc/.txt 　　 # 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt

.gitignore 规则不生效的解决办法

把某些目录或文件加入忽略规则，按照上述方法定义后发现并未生效，原因是.gitignore只能忽略那些原来没有被追踪的文件，如果某些文件已经被纳入了版本管理中，则修改.gitignore是无效的。那么解决方法就是先把本地缓存删除（改变成未被追踪状态），然后再提交

1
2
3
git rm -rf --cached .
git add .
git commit -m 'update .gitignore'
我是瘦子

发表于 | 阅读次数

第 0002 题：Vue 中的 computed 和 watch 的区别在哪里

computed：计算属性

  • 计算属性是由 data 中的已知值，得到的一个新值。
  • 这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值。
  • 计算属性不在 data 中，计算属性新值的相关已知值在 data 中。
  • 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数。
  • 别人变化影响我自己。

watch：监听数据的变化

  • 监听data中数据的变化。
  • 监听的数据就是data中的已知值。
  • 无缓存性，页面重新渲染时值不变化也会执行。
  • 我的变化影响别人。

公司：虾皮

  1. watch 擅长处理的场景：一个数据影响多个数据
  2. computed 擅长处理的场景：一个数据受多个数据影响