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

最新推荐文章于 2023-07-18 15:14:02 发布

weixin_30758821

最新推荐文章于 2023-07-18 15:14:02 发布

阅读量212

点赞数

文章标签： json ui git

原文链接：http://www.cnblogs.com/chentianwei/p/10090483.html

版权

如果喜欢使用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两个文件)