vue3.0-axios拦截器、proxy跨域代理(vue axios 拦截器)

vue3.0-axios拦截器、proxy跨域代理

目录

1. vue-cli

1）vue-cli

2）安装vue-cli

①解决Windows PowerShell不识别vue命令的问题

3）创建项目

4）基于vue ui创建vue项目 

 5）基于命令行创建vue项目

2. 组件库 

1）vue组件库

2）vue组件库和bootstrap的区别

3）最常用的vue组件库

4）ELement UI

①在vue2的项目中安装element-ui

②引入element-ui

③完整引入

④按需引入

⑤把组件的导入和注册封装为独立的模块

3. axios拦截器 ​​​​​​​ 

1）在vue3的项目中全局配置axios

2）在vue2的项目中全局配置axios

3）拦截器

​4）配置请求拦截器

①请求拦截器-Token认证

②请求拦截器-展示Loading效果

5）配置响应拦截器

①响应拦截器-关闭Loading效果

4. proxy跨域代理

1）接口的跨域问题

2）通过代理解决接口的跨域问题

3）在项目中配置proxy代理

---

1. vue-cli1）vue-cli

推荐整理分享vue3.0-axios拦截器、proxy跨域代理(vue axios 拦截器)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue axios拦截器怎么用,vuerouter拦截器,vue ajax拦截器,vuerouter拦截器,vuerouter拦截器,vue ajax拦截器,vue axios 拦截器,vue axios 拦截器,内容如对您有帮助，希望把文章链接给更多的朋友！

vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。

官方首页：Vue CLI

特点：

开箱即用基于webpack功能丰富且易于扩展支持创建vue2和vue3的项目2）安装vue-cli

vue-cli是基于Node.js开发出来的工具，因此需要使用npm将它安装为全局可用的工具：

①解决Windows PowerShell不识别vue命令的问题

3）创建项目

4）基于vue ui创建vue项目 

步骤1：在终端下运行vue ui命令，自动在浏览器中打开创建项目的可视化面板：

步骤2：在详情页面填写项目名称：

 步骤3：在预设页面选择手动配置项目：

步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CS预处理器、使用配置文件）

  

步骤5：在配置页面勾选vue版本和需要预处理器：

  

步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：

  

步骤7： 创建项目并自动安装依赖包：

vue ui的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目： 

 项目创建完成后，自动进入项目仪表盘：

 5）基于命令行创建vue项目

步骤1：在终端下运行vue create demo2命令，基于交互式的命令行创建vue的项目

步骤2：选择要安装的功能

步骤3：使用上下箭头选择vue的版本，并使用回车键确认选择

步骤4：使用上下箭头选择要使用的CSS预处理器，并使用回车键确认选择

步骤5：使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择

步骤6：是否将刚才的配置保存为预设

步骤7：选择如何安装项目中的依赖包：npm

 步骤8：开始创建项目并自动安装依赖包：

  

2. 组件库 1）vue组件库

开发者可以把自己封装的vue组件整理、打包、并发布为npm的包，从而供其他人下载和使用，这种可以直接下载并在项目中使用的现成组件，就叫做vue组件库。

2）vue组件库和bootstrap的区别

二者之间存在本质的区别：

bootstrap只提供的纯粹的原材料（CSS样式、HTML结构以及JS特效），需要由开发者做进一步的组装和改造vue组件库是遵循vue语法、高度定制的现成组件，开箱即用3）最常用的vue组件库

PC端：

ElementUI：Element - The world's most popular Vue UI frameworkView UI：iView - A high quality UI Toolkit based on Vue.js

移动端：

Mint UI：Mint UIVant：Vant 3 - Mobile UI Components built on Vue4）ELement UI

Element UI是饿了么前端团队开源的一套PC端vue组件库。支持在vue2和vue3的项目中使用：

vue2：Element - The world's most popular Vue UI frameworkvue3：一个 Vue 3 UI 框架 | Element Plus①在vue2的项目中安装element-ui

运行终端命令 npm i element-ui -S

②引入element-ui

开发者可以一次性完整引入所有的element-ui组件，或是根据需求，只按需引入用到的element-ui组件：

完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的③完整引入

在main.js中写入以下内容：

import Vue from 'vue'import App from './App.vue'// 1.完整引入element ui的组件import ElementUI from 'element-ui'// 2.导入element ui组件的样式import 'element-ui/lib/theme-chalk/index.css'// 3.把ElementUI注册为vue组件，注册之后即可在每个组件中直接使用element ui的组件Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')④按需引入

借助babel-plugin-component，可以只引入需要的组件，以达到减小项目提及的目的。

安装babel-plugin-component：npm install babel-plugin-component -D修改根目录下的babel.config.js配置文件，新增plugin节点：module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}只希望引入部分组件，比如Button，那么需要在main.js中写入：import { Button } from 'element-ui'Vue.use(Button)⑤把组件的导入和注册封装为独立的模块

在src目录下新建element-ui/index.js模块，并