成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue入坑筆記（持續(xù)更新）

tanglijun / 3344人閱讀

摘要：如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，只在路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。

一、 代碼分割,讓頁面按需加載，加快首屏速率

vue.js構(gòu)建單頁應(yīng)用雖然能通過路由來實現(xiàn)多頁面效果，但是實際上打包后所有的代碼都只有一個入口文件app.bundle.js,當項目變得十分龐大的時候，app.bundle.js文件就會非常大，而且用戶沒有訪問到的頁面代碼也包含在其中，使得首頁加載時間延長，非常影響性能和用戶體驗。
如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，只在路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。結(jié)合Vue的異步組件和webpackde code splitting feature,我們就輕松實現(xiàn)路由組件的懶加載。

方法很簡單，只需要在路由配置中改變模塊的引入方式，比如未修改的index模塊引入是這樣的：

import Indexfrom "components/index/index"

修改后(其他路由引入類似)：

const Index = (resolve) => {
  import("components/index/index").then(module => {
    resolve(module)
  })
}
二、將vue項目部署到nginx,刷新頁面跳轉(zhuǎn)到404錯誤頁面的問題 

location / {
    alias D:dist;
    try_files $uri $uri/ /index.html;
}
多個vue項目共享一個域名的方法

index.html文件添加

config/index.js文件

3.src/router/index.js文件

Nginx配置修改

將編譯好的dist文件夾放在磁盤任意位置，比如D盤

三、axios.js post application/x-www-form-urlencoded參數(shù)問題

自己遇到過的坑，引用別人寫的
請求的方法：

self.axios.post(url, {a: 1, b:2}, {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
}).then(response => response.data)
  .then(data => {
    console.log(data);
  });

這個Form Data后臺取不到數(shù)據(jù)，正常的Form Data數(shù)據(jù)不是應(yīng)該是健值對的么，像下面這樣：

解決辦法：發(fā)送數(shù)據(jù)前對data進行qs.stringify(data)處理：

var qs = require("qs");
axios.post("/foo", qs.stringify({ "bar": 123 });

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90504.html

相關(guān)文章

  • Vue入坑筆記

    摘要：近段時間常使用開發(fā)，寫點記錄，避免時間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當和繼承的不同時在文件夾內(nèi)外的話，會出現(xiàn)該錯誤。 近段時間常使用vue-cli開發(fā)，寫點記錄，避免時間久之忘了。 環(huán)境 1. nodejs　　vue-cli開發(fā)基于nodejs環(huán)境，確保開發(fā)的環(huán)境中已安裝了nodejs?！　“惭b教程 https://www....

    superw 評論0 收藏0

  • 一個JAVA WEB偽全棧的VUE入坑隨筆，從零點零五學起

    摘要：開始時間日接觸，先在官網(wǎng)十目一行學完了基本特性，作為一個的偽全棧，用感受了一把雙向綁定，感覺比的要強悍不少，但這開發(fā)環(huán)境吧，不能寫個，就總覺得自己不能零距離接觸。 開始時間：3.26日接觸Vue，先在官網(wǎng)十目一行學完了基本特性：http://cn.vuejs.org/v2/guide/，作為一個JAVA WEB的偽全棧，用Myclipse感受了一把雙向綁定，感覺比JQUERY的JSRE...

    HmyBmny 評論0 收藏0

  • 前端入坑指南

    摘要：作為自學兩年的初級前端，希望對那些想入門前端開發(fā)的人分享一些觀點。尤其是這幾年前端領(lǐng)域飛速的發(fā)展，新東西層出不窮?；蛘哧P(guān)注下我的微信公眾號前端獲取每天分享前端入門知識。為什么選擇前端 做一件事之前最好問問自己為什么要做，然后再去思考該怎么做。如果只是看到別人做了，并且有很不錯的收入，然后自己就決定做了，很可能中途放棄浪費掉很多時間。起碼問自己一個問題：我是否真的熱愛這個領(lǐng)域，并且很樂意在這個...

    junnplus 評論0 收藏0

  • Vuex 升級入坑小記

    摘要：升級入坑小記場景描述引入的版本為，開啟調(diào)試工具默認升級后可以調(diào)試。遂升級，發(fā)現(xiàn)大量使用失效，報，的中文文檔，沒有及時更新。機票訂單和用戶信息。 Vuex 升級入坑小記 場景描述 引入Vuex的版本為0.3，開啟調(diào)試工具默認升級后可以調(diào)試Vuex。給作者一個大大的贊。為提高開發(fā)體驗也是操碎了心 (??????)?? (8。安利下(Vue Devtools）。 Vue Devtools ...

    ziwenxie 評論0 收藏0

  • 一個JAVA WEB偽全棧的VUE入坑隨筆:從登錄開始（VUEX）

    摘要：此文章用于記錄本人學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。這里的用戶信息和登錄狀態(tài)都是直接取的中的用戶信息進行屬性值初始化。 此文章用于記錄本人VUE學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。中間的曲折只有自己知道，有...

    Zack 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<