人类高质量vue学习笔记(五)

2,434 阅读4分钟

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 管理第三方依赖。