工具篇【持續更新】

1、實時刷新

1.安裝 BrowserSync

npm install -g browser-sync

2.在項目目錄上右鍵，選中Git Bash Here，而後在命令行內粘貼以下命令便可：

browser-sync start --server --files "*.html,css/*.css,js/*.js"

2、經常使用的node包

在此以前，可能很須要搞清楚`--save-dev`、`--save`、`-g`之間的關係

• 淘寶鏡像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安裝全部常見插件及項目依賴

$ cnpm install -g webpack html-loader html-webpack-plugin file-loader css-loader style-loader autoprefixer less-loader babel-loader json-loader extract-text-webpack-plugin vue-cli

如下是與webpack相關的插件：

html-webpack-plugin·············以某一.html文件爲模版生成.html
html-loader·························使webpack可以識別html中img資源路徑
css-loader···························識別.css文件
file-loader··························識別.css中的資源路徑(或者url-loader)
autoprefixer·························自動添加css的前綴
less-loader···························識別.less文件
style-loader··························建立<style>標籤插入html頭部，並將處理後存在於打包後的js內
babel-loader··························識別ES6語法並轉成現代瀏覽器可以識別的ES5語法
json-loader····························識別.json文件
extract-text-webpack-plugin·····單獨抽出.css文件

---

如下是webpack+vue構建單頁面應用的初始化步驟：
vue-cli 是vue的腳手架

初始化

$ vue init webpack-simple my-project-name

cd到my-project-name目錄內

安裝依賴

$ cnpm install 或 $ cnpm i

開發者模式

$ cnpm run dev

生產模式

$ cnpm run build

---

3、window系統下難以刪除node_modules解決辦法

$ cnpm install -g rimraf

在須要刪除的node_modules文件夾所在目錄下運行

$ rimraf node_modules

---

4、Sublime Text篇

sublime默認的packages安裝目錄是在c盤的用戶內，若是咱們想改成當前的安裝目錄，方便往後的打包，如D:Sublime Text 3，那麼咱們只須要在此目錄下新建一個Data文件夾，便可。

5、window下解決文件的默認打開方式，自選項無效的問題

有時咱們想設定文件(好比：index.js)的默認的打開方式，右鍵「打開方式...」後發現，可選項內並無咱們想要的.當咱們選擇「瀏覽」時，選中想要的應用打開卻發現沒有反應。
出現這種狀況的緣由，是咱們刪除一個軟件不完全或者安裝的路徑與原先的路徑相比發生了改變發生而致使的。咱們能夠這樣操做恢復:

window+R調出「運行」，輸入regedit進入註冊表，而後找到你想要的應用，好比說sublime_text.exe,就須要依次打開「HKEY_CLASSES_ROOT\Applications\sublime_text.exe\shell\open\command」，打開」默認值「直接清空便可。
最後當你再次選擇默認選項的時候，就能夠選中了！

（附）
若是想把文件原先的默認打開方式清除掉，通俗地講就是讓電腦識別不了該文件類型，好比.sass，那麼能夠新建一個.txt文件，粘貼以下代碼：

@echo off
setlocal enabledelayedexpansion
set "ext=%~x1"
:loop
if defined ext set "ext=!ext:"=!"
if defined ext goto ok
echo 若是你不知道文件的擴展名，關閉批處理而後把文件拖到批處理文件的圖標上。
set /p "v=請輸入擴展名（如txt）而後回車："
for /f "delims=" %%i in (".!v!") do set "ext=%%~xi"
goto loop
:ok
echo 擴展名：!ext!
pause
reg delete "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\!ext!" /f
reg query "HKCR\!ext!" /ve|find /i "!ext:~1!_auto_file">nul
if not errorlevel 1 (
reg delete "HKCR\!ext!" /ve /f
reg delete "HKCR\!ext:~1!_auto_file" /f
)
taskkill /im explorer.exe /f
start %windir%\explorer.exe
pause
goto :eo

保存爲.bat文件，雙擊運行該文件，輸入須要「重置」的文件類型，好比less，回車兩次便可

6、強力刪除文件和文件夾

cd到文件目錄下
刪除文件夾： rd/s/q app 或者在任意位置使用絕對路徑rd/s/q D:\app
刪除文件：del/f/s/q test.txt 或者同上使用絕對路徑del/f/s/q D:\demo\test.txt

這樣之後不再用360的強力刪除了，並且有時還很慢

7、右鍵管理菜單的刪除

window+R打開「運行」,輸入regedit打開註冊表，找到HKEY_CLASSES_ROOT -> Directory -> background -> shell，選擇須要刪除右鍵選項對應的文件夾便可

8、vue-cli在其餘電腦上運行cnpm run dev失敗

緣由是由於，在一臺電腦上編譯後cnpm會有cache緩存，到另一臺電腦上編譯這個項目的緩存與原緩存不一致，致使編譯報錯。
解決辦法：在文件根目錄下執行 $ cnpm cache clean 命令清除掉cache緩存

9、鋒利的全局npm工具

(1) caniuse的cmd版: npm install -g caniuse-cmd
使用方法: $ caniuse box-shadow
(2) 模糊查找一些npm包(注意 是nqm): npm install -g nqm
使用方法: $ nqm query vu[模糊查詢關鍵詞] 或 $ nqm q jquer