1. 程式人生 > >vue的index.html總結

vue的index.html總結

  • 為啥要有index.html

對vue來說index.html是一個總的入口檔案,vue是單頁面應用,掛在id為app的div下然後動態渲染路由模板。

  • 單頁面應用

單頁面應用是和多頁面應用相對而言的。多頁面應用是在每次頁面跳轉的時候,後臺伺服器都重新生成一張html頁面,首屏時間快(只需要載入一次html),搜尋引擎優化效果好(html內容都在),但是切換慢(每次頁面切換都需要發出一次http請求)。單頁面應用首次載入時會請求一次html,隨後的頁面渲染都依靠js動態的將當前頁面的內容清除掉(原理:js可以感知url的變化),然後將下一個頁面的內容掛載到當前頁面上(前端實現,不是後端,無http傳送時延),首屏慢,搜尋引擎優化效果差,但是切換快。

  • index.html實戰程式碼彙總

手機端自適應使用(px*2/100=rem)

!function (e) {
      var t = e.document
        , n = t.documentElement
        , i = "orientationchange" in e ? "orientationchange" : "resize"
        , a = function e() {
          var t = n.getBoundingClientRect().width;
          return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 11.2), 8.55) + "px",
            e
        }();
      n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1),
        /iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"),
          parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")),
        t.addEventListener && (e.addEventListener(i, a, !1),
          t.addEventListener("DOMContentLoaded", a, !1))
    }(window);

有新東西再寫。。。。。。