一、使用淘宝镜像源
使用命令安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
检测:cnpm -v
二、添加vue的脚手架工具
cnpm install -g
三、自动打开浏览器
config-》index.js-》设置autoOpenBrowser为true
四、手机连接
同上进入配置文档-》设置host为0.0.0.0-》重启服务器-》找到ip地址127.0.0.1:8080,直接访问就好
五、移动端禁止缩放
user-scalable禁止缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
六、ES6转ES5
Babel是一个广泛使用的转码器,需要安装:
安装垫片:
cnpm install --save babel-polyfill
在main.js引入:
import ‘bable-polyfill‘
七、消除300毫秒延迟
cnpm install --save fastclick
引入:import fastclick from ‘fastclick‘
绑定:fastclick.attach(‘document.body‘)
八、sass、scss
安装:cnpm install --save-dev node-sass sass-loader
(node-sass 是语法环境,sass-loader 识别sass机制,可以理解为依赖)
(项目开发时,可能会因为sass版本过高报错,为避免冲突建议使用sass-loader@6.0.7)
九、项目启动命令
进入package.json查看scripts: 命令
十、px2rem的使用
安装:
cnpm install px2rem-loader
找到build\utils.js 中的 function generateLoaders 函数,在他的上面添加:
然后添加px2remLoader 到 function generateLoaders 函数中:
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] /* 在此添加 */
如图:
重启项目,之后只需要在设计稿里量px距离写在项目中就好了。