Fetch的使用； Yarn命令集； NVM的管理；VueCLi3的使用；

若是喜歡使用lower-level，使用標準的 fetch API. 好處是無需額外的加載一個外部資源。但沒有被瀏覽器徹底支持，須要使用polyfill。所以使用Axios的更多一些。

 

參考Axios的使用：

https://www.cnblogs.com/chentianwei/p/9705909.html

 

使用Vue cli3搭建一個用Fetch Api的組件。(見下文👇)

https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api

 

VueCli3文檔https://cli.vuejs.org/zh/guide/（摘錄見下文👇）

---

 

Fetch basic concepts

Fetch 的核心在於對 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用於初始化異步請求的 global fetch。得益於 JavaScript 實現的這些抽象好的 HTTP 模塊，其餘接口可以很方便的使用這些功能。

Fetch 還利用到了請求的異步特性——它是基於 Promise 的。

 

Using Fetch （點擊看中文文檔）

Fetch api 提供了一個js接口，用於訪問和操做HTTP管道的部分，如響應和請求。

注意

• 當接收到表明錯誤的HTTP state code時，從fetch()返回的Promise不會被標記爲reject, 即狀態碼不是400／500。相反，它會將Promise狀態標記爲resolve,(resolve: false)。只有當網絡硬件故障或請求被阻止時，纔會標記爲reject
• 默認，fetch不從服務器發送或接收任何cookies。要設置credentials選項。

 

例子：

      fetch(`http://localhost:3000/api/v1/discussions/${encodeURIComponent(url)}/comments`, {
        headers: {accept: 'application/json'},
        method: 'post',
        body: formData,
      })
      .then(response => response.json())
      .then(comment => commit('addComment', comment))

 

使用了箭頭函數簡化：

then(function(response) {
  return response.json()
})

 

第一個then, 把響應的結果promise對象（也是Response對象）轉化爲json格式。

除此以外，咱們還能夠根據須要把響應轉化爲其餘格式：

• clone() - As the method implies this method creates a clone of the response.
• redirect() - This method creates a new response but with a different URL.
• arrayBuffer() - In here we return a promise that resolves with an ArrayBuffer.
• formData() - Also returns a promise but one that resolves with FormData object.
• blob() - This is one resolves with a Blob.
• text() - In this case it resolves with a string.
• json() - Lastly we have the method to that resolves the promise with JSON.

第二個then, 執行一個函數。

 

Headers的解釋：

Fetch API 的 Headers 接口容許您對HTTP請求和響應頭執行各類操做。 這些操做包括檢索，設置，添加和刪除。

一個Headers對象有一個header list, 開始是空的，你可使用append("key", "value")方法添加key/value對兒。

Request.headers或者Response.headers獲得Header對象。

Headers.headers()來構建一個新的Headers對象。

例子：

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.get("Content-Type")
// 返回'text/xml'

 

 

使用請求構建器request constructor

new Request(url, {...})能夠生成fetch()方法的2個參數。

例子：

const url = ''https://randomuser.me/api'';

let data = {
  name: 'Sara'
}

var request = new Request(url, {
  method: 'post',
  body: data,
  headers: new Headers()  
};

fetch(request)
.then(function() {
//...這裏處理從API獲得的response data
})

 

 

 

---

 

 

使用Vue CLI3建立一個項目：

介紹

基於Vue.js進行快速開發的完整系統。（包括git）

• 經過@veu/cli搭建交互的項目手腳架（甚至能夠用vue ui打開網頁編輯器）
• 一個運行時依賴（@vue/cli-service）:
  • 可升級
  • 基於webpack構建
  • 可經過插件擴展
• 豐富的官方插件集合，集成前端生態中的最好工具
• 一套徹底圖形化的建立和管理Vue.js項目的用戶界面vue ui

該系統的組件

CLI

@vue/cli是一個npm包，提供vue命令。它經過vue create來快速建立新項目的手腳架。

能夠用vue serve進行快速原型開發。

能夠經過vue ui命令打開一套圖形化界面管理你的全部項目。

 

CLI服務 

@vue/cli-service是一個開發環境依賴. npm包。局部安裝在每一個@vue/cli建立的項目中。

vue-cli-service 命令，提供 serve、build 和 inspect

 

CLI插件

提供如Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。

Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin- (社區插件) 開頭

 

安裝

npm install -g @vue/cli
# OR
yarn global add @vue/cli

#用vue --version查看版本

 

Node版本要求：

須要Node.js 8.9以上版本。 可使用nvm(node version manger）

 

建立一個項目:

vue create hello-world
#和CLI2版本的命令不同

 

CLI服務的命令

啓動開發服務器

vue-cli-service serve 命令(英文叫作Binary)會啓動一個開發服務器(dev server) (基於 webpack-dev-server) 並附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)。

npm run serve
# OR
yarn serve
# OR (使用最新的npm版本)
npx vue-cli-service serve

創建生成環境production（不是很理解！）

vue-cli-service build 會在 dist/ 目錄產生一個可用於生產環境的包(a production-ready bundle)，帶有 JS/CSS/HTML 的壓縮。

查看命令幫助

#查看幫助文檔
npx vue-cli-service help
#詳細命令：
npx vue-cli-service help [command]

 

 

插件和Preset

Vue CLI 使用了一套基於插件的架構。

查看package.json。全部插件都是以@vue/cli-plugin-開頭的。

⚠️vue ui能夠安裝和管理插件。

在現有項目上安裝插件

//使用vue add 
vue add @vue/eslint

vue add router
vue add vuex

 

 

Preset

一個包含建立新項目所需預約義選項和插件的 JSON 對象，讓用戶無需在命令提示中選擇它們。

在 vue create 過程當中保存的 preset 會被放在你的 home 目錄下的一個配置文件中 (~/.vuerc)。 

---

 

 

使用Vue cli3搭建一個用Fetch Api的組件

 

錯誤❌： 

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

解決：

<li v-for="item in filtered" :key="item">
改爲：
:key="item.id"

 

分析：

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。

有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

 

看一下正則表達式插值的知識點。

 

---

 

---

 

nvm(node version manger）

Node版本管理

 

nvm是一個簡單的bash script來管理多個活動的node.js版本.

安裝nvm: 
具體看git：https://github.com/creationix/nvm ， 有不少note提示和⚠️

確認安裝：
command -v nvm
屏幕打印nvm,表示成功。

顯示電腦上的版本：
nvm ls

安裝新版本並使用這個版本：
nvm ls-remote       #顯示能夠用的版本
nvm install 10.00.0 #或者其餘版本
nvm use node

 

---

 

yarn 命令集合：

• yarn help:            幫助信息。
• yarn info <package>:  顯示一個包的詳細信息
• yarn add：        安裝一個包（以及任何它依賴的包）。
• yarn init：      初始化包；
• yarn install：用於安裝一個項目的全部依賴。常見的使用場景是在你剛checkout 一份項目代碼以後，或者須要使用其餘開發者新增的項目依賴的時候。在本地node_modules目錄安裝package.json中列出的全部依賴。
• yarn remove： 從當前包裏移除一個未使用的包。
• yarn list:            爲當前工做目錄顯示全部包和他們的dependencies。
• yarn global:        這是一個前綴，能夠用於add, bin, list, remove，upgrade命令。區別是用一個全局目錄來存儲包(使用which <filename>命令查看存儲的位置)
• yarn check: 驗證當前項目 package.json 裏的依賴版本和 yarn 的 lock 文件是否匹配。(Rails app跟目錄有package.json和yarn.lock兩個文件)
  

 

yarn add詳解：

一個包是一個包含代碼的文件夾和一個描述包內容的package.json文件。

若是你想要使用其餘包，首先要將它加入依賴列表：執行yarn add [package-name],來爲項目安裝所須要的包。

同時這個命令會更新package.json和yarn.lock文件，以便使本項目的其餘開發者可使用yarn或者yarn install來安裝相同的依賴。