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 接口的抽象,包括 RequestResponseHeadersBody,以及用于初始化异步请求的 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 命令,提供 servebuild 和 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.

解决:

  • 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 :  显示一个包的详细信息
    • 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来安装相同的依赖。


     

    转载于:https://www.cnblogs.com/chentianwei/p/10090483.html

    你可能感兴趣的:(Fetch的使用; Yarn命令集; NVM的管理;VueCLi3的使用;)