如果喜欢使用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.
解决：
改成：
: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
: 显示一个包的详细信息 yarn add： 安装一个包（以及任何它依赖的包）。yarn init： 初始化包；yarn install：用于安装一个项目的所有依赖。常见的使用场景是在你刚checkout 一份项目代码之后，或者需要使用其他开发者新增的项目依赖的时候。在本地node_modules目录安装package.json中列出的所有依赖。yarn remove： 从当前包里移除一个未使用的包。- yarn list: 为当前工作目录显示所有包和他们的dependencies。
- yarn global: 这是一个前缀，可以用于add, bin, list, remove，upgrade命令。区别是用一个全局目录来存储包(使用which
命令查看存储的位置) - 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来安装相同的依赖。