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来安装相同的依赖。

 

posted @ 2018-12-09 11:03  Mr-chen  阅读(434)  评论(0)  编辑  收藏  举报