vue开发WebApp 开发笔记（持续更新）

一、使用淘宝镜像源

　　使用命令安装：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禁止缩放

?

1	<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的使用

　　安装：

?

1	cnpm install px2rem-loader

　　找到build\utils.js 中的 function generateLoaders 函数，在他的上面添加：

  // 自适应配置

  var px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUnit: 50 //以psd设计图的宽度/10计算，比如设计稿是500px则设置50

    }

  }

　　然后添加px2remLoader 到 function generateLoaders 函数中：

?

1 2	function generateLoaders (loader, loaderOptions) {     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] /* 在此添加 */

　　如图：

　　重启项目，之后只需要在设计稿里量px距离写在项目中就好了。