Vue記一次前端開發過程

Vue腳手架搭建項目

• 1.安裝node.js，npm
• 2.全局安裝Vue腳手架
  • npm install vue-cli -g
• 3.利用vue-cli搭建項目
  • vue init webpack vue-cli-demo
  • cd vue-cli-demo
  • npm install
  • npm run dev

利用vw+vh+rem實現前端適配

• 寬度和高度全部自動適應！再加上rem佈局的字體適應，可以解決各種屏幕適配問題
• vw、vh是基於視口的佈局方案，故這個meta元素的視口必須聲明。（解決寬高自動適配）
• 綜合固定寬度、字體大小用rem、px，寬高用vw,vh ,%
  • 引入npm intsall amfe-flexible --save-dev
  • 引入px2rem npm install px2rem-loader --save-dev
  • utils.js

     const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 75,
        }
      }
    
     function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    }

     

採用Sass編寫CSS

• Sass的安裝
  • npm install node-sass --save-dev
  • npm install sass-loader --save-dev
  • webpack.base.conf.js添加rules

    { test: /.sass$/, loaders: ['style', 'css', 'sass'] }

     

vue網絡請求

• axios
  • 配置main.js
  • 開發環境跨域問題
    • config /index.js

       proxyTable: {
            '/api': {
              target: 'xxxx', // 接口的域名
              // secure: false,  // 如果是https接口，需要配置這個參數
              ws: true,
              changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
              pathRewrite: {
                '^/api': ''
              }
            }
          }

       

    • main.js配置

      axios.defaults.baseURL = '/api'

       

 路由跳轉

• 原生
  • window.loaction.href
  • window.loaction.replace()不添加history
• vue
  • this.router.push()生成新的頁面
  • this.router.replace()替換當前路由不添加history

 微信相關

• 授權相關
  • 引入 js-sdk : npm install weixin-js-sdk --save-dev
  • 頁面引用：import wx from 'weixin-js-sdk'
  • 授權是使用原生，請勿使用ajxa以免引起跨域問題

 swiper實現滑動翻頁效果

• 安裝：npm install vue-awesome-swiper --save-dev
• 引用：

  import { swiper, swiperSlide } from 'vue-awesome-swiper'

   

 mescroll.js實現上拉加載，下拉刷新

• 安裝：npm install  mescroll.js --save-dev
• 頁面引用：

  import MescrollVue from 'mescroll.js/mescroll.vue'

   

• 單個使用
  ​​
  • 參數設置

     data () {
        return {
          mescroll: null, // mescroll實例對象
          mescrollUp: {
            auto: false,
            isBounce: false,
            callback: this.upCallback, // 上拉回調,此處可簡寫; 相當於 callback: function (page, mescroll) { getListData(page); }
            page: {
              num: 0, // 當前頁碼,默認0,回調之前會加1,即callback(page)會從1開始
              size: 6 // 每頁數據的數量
            },
            offset: 100,
            bottomOffset: 20,
            hardwareClass: 'mescroll-hardware',
            mustToTop: true,
            noMoreSize: 5, // 如果列表已無數據,可設置列表的總數量要大於等於5條才顯示無更多數據;避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看
            empty: {
              // 列表第一頁無任何數據時,顯示的空提示佈局; 需配置warpId才生效;
              warpId: 'acts', // 父佈局的id;
              tip: '暫無相關數據~'
            },
            lazyLoad: {
              use: true // 是否開啓懶加載,默認false
            }
          }
        }
      }

     

  • 初始化

    mescrollInit (mescroll) { this.mescroll = mescroll }

     

  • HTML書寫

    <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit"></mescroll-vue>

     

• 多個引用初始化
  • html書寫
  • 初始化
  • 參數設置

 常見問題

• 微信瀏覽器title
  • npm install vue-wechat-title --save-dev
  • main.js中配置

    import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)

     

  • 在router中配置meta

    meta: { title: '首頁' }

     

  • 頁面中設置

    <div v-wechat-title="$route.meta.title"></div>
    //也可以動態設置
    <div v-wechat-title="$route.meta.title=title"></div>​​

     

  • 兼容iOS
    https://www.npmjs.com/package/vue-wechat-title用法參考：https://www.jianshu.com/p/b980725b62e8​
• -webkit-line-clamp vue打包後不起作用
  • 安裝npm i -S optimize-css-assets-webpack-plugin
  • 註釋掉webpack.prod.conf.js中下面這段代碼代碼：

       new OptimizeCSSPlugin({
          cssProcessorOptions: config.build.productionSourceMap
            ? { safe: true, map: { inline: false } }
            : { safe: true }
        }),

     

• 移動端Video標籤的使用
  • 1.Android端禁止全屏：x5-playsinline="true"
• iconfont字體引用
  • 在https://www.iconfont.cn上下載代碼
  • copy到vue的assets目錄下
  • 在main.js中引入css文件
  • 在標籤內引用樣式即可
• iOS下position：fixed失效，以及因爲該問題導致的頁面滑動，以及iOS上取消微信自帶下拉問題（vue頁面爲例）
  • 1.html.body採用position：fixed，寬高爲100%

    html,
    body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

     

  • 2.給Vue主頁面入口添加以下樣式

    <div id="app" class="container">
          <router-view  class="page"/>
        </div>

    .container {
      overflow-y: auto;
      height: 100%;
      ​
    }
    
    .page {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 1;
      box-sizing: border-box;
    }
    
    ​ //-webkit-overflow-scrolling: touch;是爲了讓iOS滑動體驗順暢​​

     

  • 3.vue頁面的書寫，以頭尾固定，中間滾動的爲例

     <div>
          <div class="navabar"></div>
          <div class="scroll-cotainer">
            <div class="scroll-body"></div>
          </div>
          <div class="footer"></div>
        </div>

    .navabar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 12vw;
      ​​ overflow: hidden;
      z-index: 500;
    }
    
    .footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 12vw;
      ​​ z-index: 500;
    }
    
    ​.scroll-cotainer {
      position: absolute;
      top: 12vw;
      left: 0;
      right: 0;
      bottom: 12vw;
      height: auto;
    }
    
    ​.​scroll-body {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
    

     

• vue刷新當前頁面不出現白屏問題
  • App.vue

    <template>
      <div id="app" class="container">
        <router-view class="page" v-if="isRouterAlive" />
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>
    

     

  • 需要刷新的頁面

    export default { inject: ['reload']}

    在需要刷新的地方調用this.reload()​​​