测试 - 掘金

定义默认的html模板,添加百度统计

在应用根目录下创建一个 app.html 的文件。

  <!DOCTYPE html>
  <html {{ HTML_ATTRS }}>
      <head {{ HEAD_ATTRS }}>
          {{ HEAD }}
      </head>
      <script>
          var _hmt = _hmt || [];
          (function () {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?cfb44e9b1c16206044bd8a011def5df7";
              var s = document.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(hm, s);
          })();
      </script>
      <body {{ BODY_ATTRS }}>
          {{ APP }}
      </body>
  </html>

移动端屏幕适配

根据不同终端引用不同的layout,在移动端模板中加入rem适配

新建layouts/pc.vue，layouts/mobile.vue

在mobile.vue添加rem适配

 const rem =
     "(function (doc, win) {     \
     var reg = new RegExp('(^|&)zoom=([^&]*)(&|$)');     \
     var r = win.location.search.substr(1).match(reg);     \
     var zoom = 100;    \
     if (r && unescape(r[2])) {    \
         zoom = unescape(r[2])   \
     }   \
     var docEl = doc.documentElement,    \
         resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',    \
         recalc = function () {    \
             var clientWidth = docEl.clientWidth || doc.body.clientWidth;    \
             if (!clientWidth) return;   \
             if (clientWidth >= 750) {   \
                 clientWidth = 750;    \
             }   \
             docEl.style.fontSize = zoom * (clientWidth / 750) + 'px';   \
         };    \
         if (!doc.addEventListener) return;    \
         win.addEventListener(resizeEvt, recalc, false);   \
         recalc();   \
     })(document, window);";

 head() {
     return {
         title: "test",
         meta: [
             {
             hid: "viewport",
             name: "viewport",
             content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"
             }
         ],
         script: [{ innerHTML: rem, type: "text/javascript", charset: "utf-8" }],
         __dangerouslyDisableSanitizers: ["script"]
     };
 }

使用 swiper

不需要新建文件也不要配置文件，直接在组件中使用

下载安装vue-awesome-swiper

npm install vue-awesome-swiper –save

组件中使用

 <template>
     <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
         <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="banner in banners">
             <img :src="banner">
         </div>
         </div>
         <div class="swiper-pagination"></div>
     </div>
 </template>

 <script>
 export default {
     data () {
     return {
         banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
         swiperOption: {
         pagination: {
             el: '.swiper-pagination'
         },
         // some swiper options...
         }
     }
     },
     mounted() {

     }
 }
 </script>

 <style lang="css">
     @import "swiper/dist/css/swiper.css";
 </style>