乐趣区

关于javascript:推荐一些奇奇怪怪的好东西

jiezi

目录构造

  • 轮子篇

    • browser
    • mindmap
    • nprogress
    • vConsole

  • VScode 篇

    • DIY 代码片段
    • Image Preview

  • 工具篇

    • markdown-nice
    • excalidraw
    • GitHub Readme Stats
    • gh-pages

轮子篇

1.browser

Star 731

在这个打死不做兼容的前端时代，咱们开发者会用谷歌浏览器，然而有些用户没有装置 Chrome 浏览器，或者是装了其余各式各样的杂牌浏览器内核可能是用的 Chrome 然而有些渲染机制却千姿百态，比方 Edge 360 等等浏览器都是，所以单单应用判断内核是没用的，所以咱们须要判断是否为原生谷歌浏览器。为了提倡 有轮子便用，绝不反复造轮子 的主旨，所以老严找到了 browser

地址：https://github.com/mumuy/browser

简略应用

引入

<script src="./Browser.js"></script>

应用

const info = new Browser
if(info.browser === "Chrome"){...}

2.mindmap

Star 223

咱们想象力永远比不过 产品经理 、 甲方 、和 老板，忽然有一天甲方说，让你在我的项目中加一个可编辑的思维导图，而后保留成笔记。过后听到这个需要时，我正在练习闪电五连鞭。还好老严在 轮子市场 找到了它 —mindmap

简略应用

下载

npm install @hellowuxin/mindmap

应用

<template>
  <mindmap v-model="data"></mindmap>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'

export default {components: { mindmap},
  data(){
    return{
      data: [{
      name:"如何学习 D3",
      children: [
        {
          name:"准备常识",
          children: [{ name:"HTML & CSS"},
            {name:"JavaScript"},
          ]
        },
        {
          name:"装置",
          _children: [{ name: "折叠节点"}
          ]
        },
        {
          name:"进阶",
          left: true
        },
      ]
    }]
    }
  }
}
</script>

地址：https://github.com/hellowuxin…

3.nprogress

Star 22.1k

进步用户体验的一大神器，页面进度条加载，在页面跳转时应用 NProgress 它会在顶部呈现一个进度条，反对自定义配置色彩大小

简略应用

装置

npm install NProgress

main.js

import NProgress from 'nprogress';

router.beforeEach((to, from, next) => {NProgress.start();
  next()});

router.afterEach(transition => {NProgress.done();
});

地址：https://github.com/rstacruz/n…

4.vConsole

Star 12.4k

挪动端调试，是一个十分辣手的事件，你永远不知到真机到底会产生什么意外，你还在应用 alert 来调试挪动端吗？然而如果你有了 vConsole，这所有将会变得轻而易举

<span><img src=”http://crazy-x-lovemysoul-x-vip.img.abc188.com/images/ 微信图片_20201221175526.jpg” style=”width:300px”/><img src=”http://crazy-x-lovemysoul-x-vip.img.abc188.com/images/ 微信图片_20201221175532.jpg” style=”width:300px”/></span>

查看元素查看Log、System、Network、Element、Storage 就是这么简略

简略应用

<script src="vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

https://github.com/Tencent/vC…

VScode 篇

1.DIY 代码片段

平时咱们都会用到一些模板工具 来便捷生成 代码片段

我的代码片段

你须要批改 prefix 名称

{
    "Print to console": {
        "prefix": "yjh",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "","<script>","export default {","components: {},","data() {","return {","",
            "};",
            "},",
            "computed: {},",
            "watch: {},",
            "methods: {",
            "","},","created() {","",
            "},",
            "mounted() {",
            "","},","beforeCreate() {}, ","beforeMount() {}, ","beforeUpdate() {},","updated() {}, ","beforeDestroy() {}, ","destroyed() {}, ","activated() {}, ","}","</script>","<style lang='scss' scoped>","//@import url($3); 引入公共 css 类 ","$4","</style>"],"description":"Log output to console"
    }
}

保留之后你就能够在应用模板快捷名来生成模板了

2.Image Preview

有时候在咱们的屎山代码中想要找到一张图片是一件很不容易的事件

咱们能够应用 Image Preview 插件

它会在行号左侧的小槽中展现图片的预览，MD 中也能够 hover 预览

工具篇

1.markdown-nice

Star 2.7k

号主必备工具，当你看到这篇文章的时候我就是采纳的 markdown-nice 有人问我它的长处在哪？哼

  1. 反对 markdown 语法
  2. 海量主题任你抉择
  3. 导入导出文件很不便
  4. 16 关教程教你疾速上手
  5. DIY 主题，定制本人的款式
  6. 实时保留，不再放心遗记 Ctrl+S
  7. html 源码间接转 markdown
  8. 反对在线编辑，无需装置编辑器

地址：https://github.com/mdnice/mar…

2.excalidraw

Star 13.7k

一款手绘格调的画图工具（神绘），因为发文章和做笔记的时候常常须要画图，比方一个我的项目构建流程、源码性能实现流程须要画一个图，有些流程图去用官网的又太过官网，所以抉择一个本人喜爱的画图工具也是不错的，至多比电脑自带的 画图 工具要强

地址：https://github.com/excalidraw…

3.GitHub Readme Stats

Star 15.8k

想要将本人的 GitHub 打造得更炫酷一点？比方做一个小卡片咋样放到个人主页咋样

简略操作

1. 创立一个我的项目跟本人用户名一样

2. 创立一个 README.md 文件 上面的是示例，大家能够对照着图片来批改

[![Mr.Yan's Github Stats](https://github-readme-stats.vercel.app/api?username=CrazyMrYan&count_private=true&show_icons=true&theme=merko&include_all_commits=true)](https://github.com/CrazyMrYan)

效果图：

地址：https://github.com/anuraghazr…

4.gh-pages

咱们可能常常写一些笔记或者本人的集体网站，然而须要部署动态文件，然而这须要 域名 、 服务器 、 备案 等等一些列操作，老严怎么会去花钱？有白嫖的必须安顿上。置信大家常常也会看到他人的博客都是间接应用的 https:// 用户名.github.io/ 我的项目名

简略操作

1.clone 我的项目到本地

git clone git@github.com:CrazyMrYan/home.git

2. 装置依赖

npm install  
or  
yarn install

3. 打包

npm run build 
or 
yarn build

4. 打完包之后，咱们须要进入到打包后的动态文件夹中进行初始化

cd dist
&
git init

5. 创立分支

git checkout --orphan gh-pages

6. 将文件放到暂存区

git add .
&
git commit -m "my project"

7. 连贯近程仓库

git remote add origin git@github.com:CrazyMrYan/home.git

8. 推送到刚刚创立的分支

git push origin gh-pages

当你提交实现之后呢，你能够在 github 的我的项目中看到多了一个分支 gh-pages

到这里，你就曾经部署好了你的动态文件

老严轻易弄的一个动态文件，拜访地址是 https://crazymryan.github.io/…

退出移动版