vue开发WebApp 开发笔记(持续更新)

一、使用淘宝镜像源

  使用命令安装:npm install -g cnpm --registry=https://registry.npm.taobao.org

  检测:cnpm -v

  vue开发WebApp 开发笔记(持续更新)

 

 

二、添加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 函数,在他的上面添加:

  // 自适应配置
  var px2remLoader = {
    loader: ‘px2rem-loader‘,
    options: {
      remUnit: 50 //以psd设计图的宽度/10计算,比如设计稿是500px则设置50
    }
  }

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

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

  如图:

vue开发WebApp 开发笔记(持续更新)

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

 

vue开发WebApp 开发笔记(持续更新)

上一篇:Android Support v4\v7\v13和AndroidX理解【转载】


下一篇:移动端自适应方案 对应设计图制作