工具篇【持续更新】

一、实时刷新

1.安装 BrowserSync

npm install -g browser-sync

2.在项目目录上右键，选中Git Bash Here，然后在命令行内粘贴如下命令即可：

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

二、常用的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

---

三、window系统下难以删除node_modules解决办法

$ cnpm install -g rimraf

在需要删除的node_modules文件夹所在目录下运行

$ rimraf node_modules

---

四、Sublime Text篇

sublime默认的packages安装目录是在c盘的用户内，如果我们想改为当前的安装目录，方便日后的打包，如D:Sublime Text 3，那么我们只需要在此目录下新建一个Data文件夹，即可。

五、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，回车两次即可

六、强力删除文件和文件夹

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的强力删除了，而且有时还很慢

七、右键管理菜单的删除

window+R打开“运行”,输入regedit打开注册表，找到HKEY_CLASSES_ROOT -> Directory -> background -> shell，选择需要删除右键选项对应的文件夹即可

八、vue-cli在其他电脑上运行cnpm run dev失败

原因是因为，在一台电脑上编译后cnpm会有cache缓存，到另外一台电脑上编译这个项目的缓存与原缓存不一致，导致编译报错。
解决办法：在文件根目录下执行 $ cnpm cache clean 命令清除掉cache缓存

九、锋利的全局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