工具篇【持续更新】

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