lang	title	description
zh-CN	收集	收集好玩的

my-bfe-awesome

前端个人积累 🎉

一加一等于 {{1+1}} span: {{ i }} 这是默认主题内置的 <Badge /> 组件 [[toc]]

TODO

• 学习 sass
• 学习 TypeScript
• 学习 redis
• webpack4.0 + vue
• Vue 源码分析
• Vue 技术揭秘
• CreateJS 是基于 HTML5 开发的一套模块化的库和工具
• vue-test-utils
• Vue 组件的单元测试
• Vue SSR 指南
• Nuxt.js
• 从 vue-cli 源码学习如何写模板
• 面试经验
• JavaScript 开发者应懂的 33 个概念
• 面试问题
• 开源 books
• [] react 源码
• [] ts
• [] make games
• [] storybook
• [] vue3.0
• [] 手写面试
• [] BEM 命名法
• Vue3 入门指南，与实战案例
• [] web 全栈体系博客
• [] Markdown教程
• [] emoji-cheat-sheet

目录

• node 相关

  • node 常量

• 电子书

• webpack

• 突破防盗链机制

  很多图片链接设置了防盗链机制，从我的网站请求图片会返回 403 错误，但直接在浏览器中打开图片的 url 时却又正常。

• mac 使用

• 前端

  • 移动端调试
  • 动画库
  • css
  • JS
    • js 片段
    • js 复制粘贴
    • js 任务源
    • JavaScript 常见设计模式解析

• git 使用

• shell 使用

• adb 使用

• vue 常用组件

  • Vue 源码分析
  • Vue 技术揭秘
  • 引导提示框 vue-introjs
  • 数字动画跳动 vue-countup-v2
  • Vue 的 video.js 播放器组件vue-video-player
  • [better-scroll] (http://ustbhuangyi.github.io/better-scroll/)

• 工具

  • Algolia 搜索 站内搜索
  • 知竹

• 教程

  • 静态网站添加评论的方法

  • 我的 Linux 开发环境

  • linux 开发环境配置

node 相关

node 常量

• __dirname ：全局变量，存储的是代码所在文件的所在的文件目录
• __filename：全局变量，存储的是代码所在文件的文件名

// /work/coding/githubbuild/my-bfe-awesome/test.js
console.log(__dirname);
// /work/coding/githubbuild/my-bfe-awesome
console.log(__filename);
// /work/coding/githubbuild/my-bfe-awesome/test.js

• 查看全局对象 再终端输入 node 后 安两次 tab 键

  

电子书

• 深入浅出 Webpack
• ECMAScript 6 入门

webpack

• 生成 html 的插件 https://github.com/ampedandwired/html-webpack-plugin 配置

new HtmlWebpackPlugin({
    filename: path.resolve(config.build.assetsRoot, 'index.html'), // 生成的html的文件名
    template: 'index.html', // 依据的模板
    inject: true, // 注入的js文件将会被放在body标签中,当值为'head'时，将被放在head标签中
    minify: { // 压缩配置
    removeComments: true, // 删除html中的注释代码
    collapseWhitespace: true, // 删除html中的空白符
    removeAttributeQuotes: true, // 删除html元素中属性的引号
    minifyJS: {
        compress: {
        warnings: false
        }
    },
    // 更多配置
    // https://github.com/kangax/html-minifier#options-quick-reference
    },
    chunksSortMode: 'dependency' // 按dependency的顺序引入
}

动画库

1. velocity.js 支持链式调用
2. gsap GSAP 是一个 JavaScript 库，用于创建适用于所有主流浏览器的高性能动画
3. tweenjs TweenJS 类库主要用来调整和动画 HTML5 和 Javascript 属性，提供了简单并且强大的 tweening 接口。
4. hilo 阿里的 HTML5 互动游戏引擎
5. pixijs PixiJS 是一个超快的 2D 渲染游戏引擎。它自动侦测使用 WebGL 或者 Canvas。
6. Kaboom.js Kaboom 是一个 JavaScript 库，可帮助您快速有趣地制作游戏.

前端工具

• Valine 一款快速、简洁且高效的无后端评论系统。
• 基于 UI 组件的 Vue 可视化布局工具
• 正则表达式测试网址
• 用户指引库
• 腾讯蓝鲸

博客

• 美团技术团队
• 朱嘉伟
• 小火柴的蓝色理想
• dwqs/blog
• 滴滴前端博客
• CSS教程

工具

图片相关

• Tinypng 压缩图片
• 智图 压缩
• up up to you 生产举牌小人图片
• 生成文字云图片
• 网页编辑图片工具
• 免费商用的插画

pm2

安装

  npm install pm2 -g
  // 进程间通信模块保证日志正常打印 pm2 安装模块依赖 git
  pm2 install pm2-intercom

配置文件

 // package.json 里 scripts 的配置
    "pm2": "pm2 start ./config/ecosystem.config.js --env production",

// config/ecosystem.config.js
module.exports = {
  /**
   * Application configuration section
   * http://pm2.keymetrics.io/docs/usage/application-declaration/
   */
  apps: [
    // First application
    {
      name: "",
      script: "./bin/www",
      watch: true,
      ignore_watch: [
        // 从监控目录中排除
        "node_modules",
        "logs",
        "public",
        ".idea",
        ".git",
      ],
      watch_options: {
        followSymlinks: false,
      },
      error_file: "./logs/pm2/app-err.log", // 错误日志路径
      out_file: "./logs/pm2/app-out.log", // 普通日志路径
      instances: 2,
      // instance_var: "NODE_APP_INSTANCE",
      exec_mode: "cluster", // 集群模式 负载均衡
      env: {
        COMMON_VARIABLE: "true",
      },
      env_production: {
        NODE_ENV: "production",
      },
      env_dev: {
        NODE_ENV: "dev",
      },
      env_test: {
        NODE_ENV: "test",
      },
    },
  ],
};

字符串模版 折行转义字符

var htmlSTring =
  "<div>\
  This is a string.\
</div>";

http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9