vue h5项目架构搭建

1. vue init webpack

2.添加vuex cnpm i vuex -D

        添加vuex demo文件，main.js中引入store

3.添加axios cnpm i axios -D,(des,rsa公司加解密标准)

       添加http.js等文件

4.添加less 或者 stylus

4.1  添加less  , cnpm i less less-loader css-loader -D

4.2 添加stylus cnpm install stylus stylus-loader css-loader --save

5.添加fastclick cnpm i fastclick -D  :解决移动端页面点击会延迟300ms的问题

   main.js 中添加 fastclick.attach(document.body)

6.添加 vue-lazyload ：图片预加载

   main.js 中 添加 

import VueLazyload from 'vue-lazyload'复制代码

Vue.use(VueLazyload, {

loading: require('@/common/image/default.png')
})复制代码

    使用方式 <img src="" v-lazy >

7. 使用eslint ，webpack模块已自动添加

8. 全局filter   建目录components/filters

    Vue.filter("toNumber", function(str) {

if(!str){
        return 0
    }
    return parseFloat(str);
  });复制代码

9.utils 工具包 建目录components/utils

10 .兼容IOS8  package.json中添加IOS>=8

"browserslist": ["> 1%",
  "last 2 versions",
  "not ie <= 8",
  "IOS >= 8"
]复制代码

11 . 加载模块优化 router/index.js 

   {   path: '/auth/login',

component:   (resolve) => {require(['@/components/kams/auth/login'], resolve) },
},复制代码

12 . meta(禁用页面缓存与viewport设置)

<meta charset="utf-8"><meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
复制代码

13 <keep-alive></keep-alive>

 app.js中

  <transition name="router-fade" mode="out-in">

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

.router-fade-enter-active, .router-fade-leave-active {
   transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
   opacity: 0;
}
复制代码

14. 图片分辨率与1像表 问题

less版本：

.bg-image(@url){
  background-image: url("../image/@{url}@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
   background-image: url("../image/@{url}@3x.png");
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
复制代码

stylus版本：

bg-image(url)
  background-image: url("common/image/"+url+"@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image url("common/image/"+url+"@3x.png")

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
app.vue 中引入
<style lang="stylus" rel="stylesheet/stylus">
@require "./common/style/common.styl"
复制代码

15.ployfill ：<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>

16.1 不使用ui框架：自定义alertTip loading

16.2 使用cube-ui

       cnpm install cube-ui --save

      配置：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

17.下拉 上拉 页面刷新

18. svg 的使用

19.vue-swiper （暂不用）

20.webpack plugins的使用 （略）

21.<transition name="showlist"> 标签的使用 （动画效果）

    .showlist-enter-active,

.showlist-leave-active {
  transition: all 0.3s;
  transform: translateY(0);
}
.showlist-enter,
.showlist-leave-active {
  opacity: 0;
  transform: translateY(-100%);
}复制代码

22.vconsole 调试器

  import VConsole from 'vconsole'

Vue.use(new VConsole())复制代码

23 px2rem 的使用：https://juejin.im/post/5b976bb85188255c9031b7b2