网站开发项目分析模板sem网络推广公司

 有时候在写css样式的时候，分不清哪些属性需要前缀，哪些不需要写前缀，sublime text这款编辑器下安装autoprefixer这款插件可以省去很多问题，写起来也很方便。

1 确保系统已经安装node.js
可直接去官网上下载并安装，我的系统是win7只能安装低版本的node.js
官网：https://nodejs.org/en/download
老版本：https://nodejs.org/en/about/previous-releases
我下载版本的是v13.14.0 https://nodejs.org/download/release/v13.14.0/
根据自己系统选择 我的是64位直接选择node-v13.14.0-x86.msi 下载 根据提示安装即可。
安装成功后在命令行执行node -v和npm -v 查看当前版本

2 sublime text下安装插件autoprefixer
打开sublime text编辑器，Ctrl + shift + p，选择Install package，然后输入autoprefixer，即可开始安装。安装完后，并不能立即使用，还得配置一下快捷键，选择Preferences =》 Key Bindings,添加如下代码：

[{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
]

选择Preferences => Package Settings => Autoprefixer,在文件右侧添加如下代码

{"browsers": ["last 20 versions", "> 5%", "Firefox >= 10", "ie 6-11"],"cascade": true,"remove": true
}

其中last 20 versions表示浏览器最近的20个版本（这个数据可随意更改）， 5%表示市场份额大于5%（百分比可随意），Firefox >= 10表示火狐浏览器版本大于或等于10

编辑代码：

 .demo { display: flex; } 

ctrl+alt+shift+p 会提示错误如下图：

找到sublim安装插件的目录 找到autoprefixer目录进入之后删除node_modules目录和package-lock.json文件，删除之后进入命令行cd到autoprefixer插件目录 按照提示执行npx browserslist@latest --update-db ，执行完之后还是会报错根据提示执行npm install caniuse-lite
这时候在测试代码再次执行 ctrl+alt+shift+p

.box {display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;
}

最终sublim会根据CSS样式自动补上前缀