人类高质量vue学习笔记（五）

1. Axios

Axios 是一个用于发起异步请求的技术，它和 Ajax 的作用一样，在 Vue 中被广泛使用。

CDN 引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发送 GET 请求：

axios.get("http://localhost:8081/user",{ params: { id: id }, headers: { token: token }})
.then(res => {
    console.log(res);
})
.catch(err => {
    console.error(err);
})

发送 POST 请求：

axios.post("http://localhost:8081/save",{id:id,name:'知否技术'}, { headers: { 'token': token }})
.then(res => {
    console.log(res);
})
.catch(err => {
    console.error(err); 
})

2. 脚手架

说起脚手架，我们首先会想到：

众所周知，脚手架是为了保证工程顺利施工而搭设的工作平台，它是整个工程的基础框架。

脚手架搭建好之后，工人只用专注于垒砖砌墙等主要工作。

Vue 中的脚手架和工程中的脚手架功能类似。

在没有脚手架之前，我们开发 Vue 项目需要在每个页面都引入 vue 等相关的 js，需要配置一堆文件，还需要费尽心思去维护各个页面之间的关系，非常苦逼。

而 Vue 脚手架帮我们把项目的结构、配置文件、路由等全部配置好了, 我们再也不用管那些乱七八糟的配置了，只需要安安静静开发相关业务功能即可。

3. Vue CLI

CLI 叫做命令行界面，俗称脚手架。学过 Linux 的应该都知道我们可以通过一些Linux 命令完成一些操作。

Vue CLI 是 Vue 官方用来发布 vue.js 项目的脚手架。通俗的来说就是：有了 Vue-CLI（Vue 脚手架），我们可以使用一些 vue 相关的命令快速创建一个包含各种配置的 vue 项目。

Vue CLI 优点：使用简单的命令快速创建 Vue 项目，创建的项目包含各种配置文件、通用的 js 等，大大提高了我们的开发速度。

3.1 安装配置 node 环境

因为 Vue-CLI 的使用要基于 Node.js，所以我们要先安装配置 node 环境。

1.下载

官网地址

http://nodejs.cn/download/

2.配置环境变量

windows系统：

系统环境变量 -> 新建：NODE_HOME，值为 node.js 的安装目录。path 变量新增 %NODE_HOME%

Mac 系统：安装完自动配置环境变量。

3.验证

node -v

4.配置淘宝镜像

配置完，可以提高下载速度：

npm config set registry https://registry.npm.taobao.org
npm config get registry

5.配置 npm 下载依赖位置

windows:

npm config set cache "E:\nodereps\npm_cache"
npm config set prefix "E:\nodereps\npm_global"

macOS:

npm config set cache "/Users/zhifou/nodereps"
npm config set prefix "/Users/zhifou/nodereps"

6.验证nodejs环境配置

npm config ls

注：

我们安装配置 node.js 之后，用到的最关键的东西是 npm 。npm 全称是 Node Package Manager，也就是 NodeJS 的包管理工具。

npm 可以将第三方的插件（依赖）下载到本地使用，例如 axios 、vue-pdf 等。既然要从远程仓库下载到本地，所以需要配置依赖的下载位置。

学过后端的应该知道，其实 npm 就像 Maven 一样，Maven 主要是用来管理后端依赖，npm 主要用来管理前端依赖。

3.2 安装 Vue-CLI

1.先卸载之前安装的脚手架

npm uninstall -g @vue/cli  // 3.x版本
npm uninstall -g vue-cli  // 2.x版本

2.安装vue Cli

npm install -g vue-cli

4. 创建脚手架项目

因为 Vue 最新版本是 vue 3.0，这里我们主要介绍基于 vue 2.0 版本创建脚手架项目。

vue2 创建脚手架项目命令：

vue init webpack 项目名

例如：

这里我们使用 VSCODE 导入刚刚创建的项目：

上面项目的结构就是我们借助 vue-cli 脚手架通过一些简单的命令创建出来的 vue 项目的结构。

运行项目：

npm run start

下面就是使用 vue 脚手架创建出来的 vue 项目的初始（通用）页面。

5. vue 脚手架项目结构

重点关注 assets、components、router、main.js 这几个目录。

6. 问题解答

1.Axios 和 vue 啥关系

答：Axios 是一个基于 promise 的网络请求库，我们可以在 vue 项目中集成 axios ，从而发起 http 请求。

2.node 和 vue-cli 啥关系

答：node.js 能够在服务器端运行 js 代码。vue-cli 可以自动生成一个 vue 项目文件夹，这个项目文件夹中包含项目的配置文件、依赖包信息文件等。要想使用 vue-cli，必须先安装配置 node.js 环境。

3.vue-cli 和脚手架啥关系

答：vue-cli 就是 Vue 的脚手架工具，我们在 node 环境下安装完 vue-cli 之后，就可以使用 vue-cli（脚手架）快速搭建 vue 项目。

4.脚手架项目和 npm 啥关系

答：我们使用 vue-cli 创建的就是脚手架项目，创建完项目之后，我们可以使用 npm 管理第三方依赖。