人类高质量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，也就是 node.js 的包管理工具。
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 管理第三方依赖。