推薦一些奇奇怪怪的好東西
目錄結構
- 輪子篇
- 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
簡單使用
引入
<scriptsrc="./Browser.js"></script>
使用
constinfo=newBrowser
if(info.browser==="Chrome"){
...
}
2.mindmap
Star 223
我們想象力永遠比不過 產品經理 、甲方、和老闆 ，突然有一天甲方說，讓你在專案中加一個可編輯的思維導圖，然後儲存成筆記。當時聽到這個需求時，我正在練習閃電五連鞭。還好老嚴在 輪子市場 找到了它 —mindmap
簡單使用
下載
npminstall@hellowuxin/mindmap
使用
<template>
<mindmapv-model="data"></mindmap>
</template>
<script>
importmindmapfrom'@hellowuxin/mindmap'
exportdefault{
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/mindmap
3.nprogress
Star 22.1k
提高使用者體驗的一大神器，頁面進度條載入，在頁面跳轉時使用 NProgress 它會在頂部出現一個進度條，支援自定義配置顏色大小
簡單使用
安裝
npminstallNProgress
main.js
importNProgressfrom'nprogress';
router.beforeEach((to,from,next)=>{
NProgress.start();
next()
});
router.afterEach(transition=>{
NProgress.done();
});
地址：https://github.com/rstacruz/nprogress
4.vConsole
Star 12.4k
移動端除錯，是一個非常棘手的事情，你永遠不知到真機到底會發生什麼意外，你還在使用 alert 來除錯移動端嗎？但是如果你有了 vConsole ，這一切將會變得輕而易舉
檢視元素檢視Log 、System、 Network 、Element 、Storage 就是這麼簡單
簡單使用
<scriptsrc="vconsole.min.js"></script>
<script>
//初始化
varvConsole=newVConsole();
console.log('Helloworld');
</script>
https://github.com/Tencent/vConsole
VScode 篇
1.DIY 程式碼片段
平常我們都會用到一些模板工具 來便捷生成 程式碼片段
本圖使用神繪製作
我的程式碼片段
你需要修改 prefix 名稱
{
"Printtoconsole":{
"prefix":"yjh",
"body":[
"<!--$1-->",
"<template>",
"<divclass='$2'>$5</div>",
"</template>",
"",
"<script>",
"exportdefault{",
"components:{},",
"data(){",
"return{",
"",
"};",
"},",
"computed:{},",
"watch:{},",
"methods:{",
"",
"},",
"created(){",
"",
"},",
"mounted(){",
"",
"},",
"beforeCreate(){},",
"beforeMount(){},",
"beforeUpdate(){},",
"updated(){},",
"beforeDestroy(){},",
"destroyed(){},",
"activated(){},",
"}",
"</script>",
"<stylelang='scss'scoped>",
"//@importurl($3);引入公共css類",
"$4",
"</style>"
],
"description":"Logoutputtoconsole"
}
}
儲存之後你就可以在使用模板快捷名來生成模板了
2.Image Preview
有時候在我們的屎山程式碼中想要找到一張圖片是一件很不容易的事情
我們可以使用 Image Preview 外掛
它會在行號左側的小槽中展示圖片的預覽，MD 中也可以 hover 預覽
工具篇
1.markdown-nice
Star 2.7k
號主必備工具 ， 當你看到這篇文章的時候我就是採用的 markdown-nice 有人問我它的優點在哪？哼
- 支援markdown語法
- 海量主題任你選擇
- 匯入匯出檔案很方便
- 16關教程教你快速上手
- DIY 主題，定製自己的樣式
- 實時儲存，不再擔心忘記Ctrl+S
- html 原始碼直接轉 markdown
- 支援線上編輯，無需安裝編輯器
地址：https://github.com/mdnice/markdown-nice
2.excalidraw
Star 13.7k
一款手繪風格的畫圖工具（神繪），因為發文章和做筆記的時候經常需要畫圖，比如一個專案構建流程、原始碼功能實現流程需要畫一個圖，有些流程圖去用官方的又太過官方，所以選擇一個自己喜歡的畫圖工具也是不錯的，至少比電腦自帶的 畫圖 工具要強
地址：https://github.com/excalidraw/excalidraw
3.GitHub Readme Stats
Star 15.8k
想要將自己的 GitHub 打造得更炫酷一點？比如做一個小卡片咋樣放到個人主頁咋樣
簡單操作
1.建立一個專案跟自己使用者名稱一樣
2.建立一個 README.md 檔案 下面的是示例，大家可以對照著圖片來修改
[](https://github.com/CrazyMrYan)
效果圖：
地址：https://github.com/anuraghazra/github-readme-stats
4.gh-pages
我們可能經常寫一些筆記或者自己的個人網站，但是需要部署靜態檔案，但是這需要域名、伺服器、備案 等等一些列操作，老嚴怎麼會去花錢？有白嫖的必須安排上。相信大家經常也會看到別人的部落格都是直接使用的 https://使用者名稱.github.io/專案名
簡單操作
1.clone 專案到本地
[email protected]:CrazyMrYan/home.git
2.安裝依賴
npminstall
or
yarninstall
3.打包
npmrunbuild
or
yarnbuild
4.打完包之後，我們需要進入到打包後的靜態資料夾中進行初始化
cddist
&
gitinit
5.建立分支
gitcheckout--orphangh-pages
6.將檔案放到暫存區
gitadd.
&
gitcommit-m"myproject"
7.連線遠端倉庫
[email protected]:CrazyMrYan/home.git
8.推送到剛剛建立的分支
gitpushorigingh-pages
當你提交完成之後呢，你可以在github的專案中看到多了一個分支 gh-pages
到這裡，你就已經部署好了你的靜態檔案
老嚴隨便弄的一個靜態檔案，訪問地址是 https://crazymryan.github.io/home