vue入坑筆記（持續更新）

tanglijun 發布于2019-08-21 18:28 / 3332人閱讀

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

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

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

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

import Indexfrom "components/index/index"

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

const Index = (resolve) => {
  import("components/index/index").then(module => {
    resolve(module)
  })
}

二、將vue項目部署到nginx,刷新頁面跳轉到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參數問題

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

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后臺取不到數據，正常的Form Data數據不是應該是健值對的么，像下面這樣：

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90504.html

Vue入坑筆記

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

superw 2019-08-26 12:16 評論0 收藏0
一個JAVA WEB偽全棧的VUE入坑隨筆，從零點零五學起

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

HmyBmny 2019-08-21 15:33 評論0 收藏0
前端入坑指南

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

junnplus 2019-05-22 15:27 評論0 收藏0
Vuex 升級入坑小記

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

ziwenxie 2019-08-19 17:56 評論0 收藏0
一個JAVA WEB偽全棧的VUE入坑隨筆:從登錄開始（VUEX）

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

Zack 2019-08-20 15:47 評論0 收藏0