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