组件 流程
1 2 3 COPY const cpN = Vue.extend({ template:'HTMLCODE' })
1 COPY Vue.component('cpn' ,cpN)
全局组件和局部组件
Vue实例外注册的组件是全局组件
Vue实例内注册的组件为局部组件
1 2 3 4 COPY component:{ cpn: cpN }
父子组件 1 2 3 4 5 6 7 8 9 10 11 12 COPY const cpn2 = Vue.extend({ template:`HTML CODE` , }) const cpn1 = Vue.extend({ template:`HTML CODE <cpn></cpn>` , components:{ cpn: cpn2 }, })
注意:** cpn2因未在全局注册,所以仅能在cpn1中调用,不能在Vue挂载的部分使用**
更推荐的组件创建方式 1 2 3 COPY Vue.component('cpn1' ,{ template: `HTML CODE` })
HTML CODE
分离写法1 2 3 4 5 6 7 8 COPY <scriprt type ='text/x-template' id ='cpn' > SOME HTML CODE </scriprt > Vue.component('cpn'{ template: '#cpn', //这里的template的内容即是<script > </script > 标签里的'SOME HTML CODE' })
OR
1 2 3 4 5 6 7 8 COPY <template id ='cpn ' > SOME HTML CODE </template > Vue.component('cpn'{ template: '#cpn', //这里的template的内容即是<template > 标签里的'SOME HTML CODE' })
组件访问数据的范围
component
内也有data选项,但是data选项应该是一个返回对象的函数而不是对象
1 2 3 4 5 6 7 8 COPY Vue.component('cpn' ,{ template: `HTML CODE` , data(){ return { message: 2 , } } })
为什么data不能是对象??
因为当有多个组件实例时,若data是对象则多个实例会共享data里的值,而将data设计为函数,每次实例化组件时都会为当前组件调用data函数返回一个对象,与其余实例不共享。所以在设计Vue的时候才会这样设计,强行写为对象会报错。
1 2 3 4 5 6 7 8 9 10 COPY example(){ return { value:1 , } } const a = example();const b = example(); b.value = 2 ;
1 2 3 4 5 6 7 8 9 10 COPY const obj = { value:1 , } example(){ return obj; } const a = example();const b = example();b.value = 2 ; a.value == b.value
父子组件的通信 父传子 通过props
属性传递,props
可以是数组也可以是对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 COPY <cpn :Cmessage ='message' > </cpn > <template id ='cpn' > {{Cmessage}}</template > <script > const cpn = { template: '#cpn' , props:{ Cmessage:{ type: String , default : 'default value' require : } } data(){ return {}; }, } const VM = new Vue(){ el:'' , data:{ message: 'this is a message' }, components: { cpn: cpn } } </script >
注意:** props
的验证还可以自定义**
子传父 通过自定义事件
$emit(‘event-name’,props)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 COPY <cpn :Cmessage ='message' > </cpn > <template id ='cpn' > <button @click ='clicked(Cmessage)' > //点击事件发生主席那个clicked并以Cmessage作为参数 emit click </button > </template > <script > const cpn = { template: '#cpn' , props:{ Cmessage:{ type: String , default : 'Cmessage ' } } data(){ return { }; }, methods:{ clicked(Cmessage){ this .$emit('cpn-click' Cmessage) } } } } const VM = new Vue(){ el:'' , data:{ message: 'this is a message' }, components: { cpn: cpn }, methods:{ cpn-click(Cmessage){ console .log(Cmessage); } } } </script >
关键字 this.$children 可以获取this(Vue实例)的子组件数组通过下标来查询具体某一项组件(不推荐这种方式)
$refs
1 2 3 COPY <cpn ref ='a' > </cpn > //若有一个组件像这样添加了refs属性this.$refs.a//则可以这样来获取此组件
$parent 可以获取组件的父组件
$root 可以访问根组件
插槽slot 流程
1 2 3 4 5 6 COPY <template id ='cpn' > HTMLCODE <slot > </slot > </template >
这里为cpn组件预留了一个slot插槽
1 2 COPY <cpn > <button > click</button > </cpn > //这里把slot替换为了一个button
slot的name 默认替换的是无name属性的插槽
若要选定某name的插槽,则需要
1 2 3 4 5 6 7 8 9 10 11 12 COPY 例如: <template id ="cpn" > <div > <h2 > 组件</h2 > <p > 组件组件</p > <slot name ="left" > <span > left</span > </slot > <slot name ="center" > <span > center</span > </slot > <slot name ="right" > <span > right</span > </slot > </div > </template > <cpn > <span slot ='left' > left will be cover</span > </cpn >
作用域插槽 想要把子组件的数据传到父组件进行显示,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 COPY <template > <slot > </slot > </template > <cpn > <ul > <li v-for ='item in things' > {{item}}</li > </ul > </cpn > <template > <slot :things = 'things' > </slot > </template > <cpn > <div slot-scope = 'slot' > <ul > <li v-for ='item in slot.things' > {{item}}</li > </ul > </div > </cpn > <script > const app = new Vue({ el:'' , data:{}, components:{ cpn:{ template: data(){ things:['thing1' ,'thing2' ]. } } } }) </script >
作用域 看下面的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 COPY <template > <div > app.isShow</div > <div v-show ='isShow' > cpn.isShow</div > </template > <cpn v-show ='isShow' /> <script > const app = new Vue({ el:'' , data:{ isShow:true , }, components:{ tempalte: , data(){ return { isShow:false , } } } }) </script > //cpn的v-show会绑定到Vue实例app的isShow //cpn内的div的v-show会绑定到cpn的isShow
模块化 为什么需要模块化? 为了避免同一个项目下各个文件中变量作用域冲突造成的奇怪问题和节省开发成本
老旧的做法是使用匿名函数和模块导出
1 2 3 4 5 6 7 8 9 10 11 12 COPY var mouduleA = (function ( ) { var obj = {}; var flag = true ; function sum (num1,num2 ) { return num1+num2; } obj.flag = flag; obj.sum = sum; return obj })
常用的模块化规范:
CommonJS(node.js)
AMD
CMD
Modules
CommonJS做法 node环境下
1 2 3 4 5 6 7 8 9 COPY var flag = true ;function sum (num1,num2 ) { return num1+num2; } module .exports={ flag, sum, }
1 2 COPY var moduleA = require ('moduleA.js' )
ES6做法 1 2 COPY <script src ="moduleA.js" type ="module></script> <!--规定type=" module "后,每个js 文件都有单独的空间,其余js 文件不得直接访问,需要导出-- >
1 2 3 4 5 6 7 8 COPY var flag = true ;function sum (num1,num2 ) { return num1+num2; } export {flag,sum};
1 2 3 4 COPY import {flag,sum} from "moduleA.js" import * as mouduleA(别名) from 'moduleA.js'
PS(export default)
1 2 3 COPY export default flag
1 2 COPY import f from 'moduleA.js'
Webpack与node 前端模块化打包工具
webpack依赖node环境
1 2 3 4 COPY npm init npm install (--save-dev) webpack@版本号 -g
webpack配置文件 创建一个**webpack.config.js** 文件
1 2 3 4 5 6 7 8 9 10 11 COPY const path = require ('path' ) moudule.exports={ entry: './src/main.js' output:{ path: path.reslove(__dirname,'dist' ), filename:'bundle.js' }
package.json 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 COPY { "name" : "meetwebpack" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" , "bulid" : "webpack" }, "author" : "" , "license" : "ISC" }
loader npm安装loader(以css为例)
1 2 COPY npm install --save-dev css-loader npm install --save-dev style-loader
在webpack.config.js中配置
1 2 3 4 5 6 7 8 9 10 11 COPY //新添加module对象,如下 module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] //css-loader负责解析加载css //style-loader负责提交css到DOM上 } ] }
**注意:**有时候css-loader与style-loader的版本过高或者过低会出现问题,这时候在package.json里手动调低或者调高版本号即可
图片loader
1 COPY npm install --save-dev url-loader
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 COPY module .exports = { module : { rules: [ { test: /\.(png|jpg|gif)$/ , use: [ { loader: 'url-loader' , options: { limit: 8192 , name: 'img/[name].[hash:8].[ext]' } } ] } ] } }
1 2 COPY npm install --save-dev file-loader@版本号
注:**通过file-loader加载图片,路径会在output中path所指的文件夹中,
若html入口程序不在dist则浏览器无法正确找到
需要在webpack.config.js的output中修改配置
ES6转ES5
1 2 COPY npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 COPY module : { rules: [ { test: /\.js$/ , exclude: /(node_modules|bower_components)/ , use: { loader: 'babel-loader' , options: { presets: ['es2015' ] } } } ] }
wepack配置Vue
1 2 3 COPY import Vue from 'vue'
注意: 需要在webpack.config.js中配置下面这一段代码来处理runtime-only和runtime-compiler的问题
1 2 3 4 5 6 COPY resolve: { alias: { 'vue$' : 'vue/dist/vue.esm.js' } }
runtime-only不能编译vue模板
runtime-compiler可以编译
Vue如何简化开发 1 2 3 4 5 6 7 8 9 10 COPY const app = new Vue({ el:'#app' , template:` <div>{{message}}</div> ` , data{ message:'hello' , }, })
在vue实例内写html模板
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 COPY const app = new Vue({ el: '#app' , template: ` <div> <h2>{{message}}</h2> <h3>{{name}}</h3> <button @click='btnclick'>click</button> </div> ` , data: { message: 'hello' , name: 'EE' }, methods: { btnClick() { alert('click??' ); } } })
在组件内写html模板把此组件作为Vue实例的子组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 COPY import Vue from 'vue' const App = { template: ` <div> <h2>{{message}}</h2> <h3>{{name}}</h3> <button @click='btnClick'>click</button> </div> ` , data: { message: 'hello' , name: 'EE' }, methods: { btnClick() { alert('click??' ); } } } const app = new Vue({ el: '#app' , template: `<App/>` , components: { App, } })
把组件抽离成一个单独的js文件后导出,再在main.js中引入此组件即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 COPY const App = { template: ` <div> <h2>{{message}}</h2> <h3>{{name}}</h3> <button @click='btnClick'>click</button> </div> ` , data() { return { message: 'hello' , name: 'EE' } }, methods: { btnClick() { alert('click??' ); } } } export default App
1 2 3 4 5 6 7 8 9 10 COPY import App from './src/js/vue/app.js' const app = new Vue({ el: '#app' , template: `<App/>` , components: { App, } })
创建.vue文件,将组件的模板,js代码,样式整合到vue文件中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 COPY //app.vue <template > <div > <h2 class ='title' > {{message}}</h2 > <h3 > {{name}}</h3 > <button @click ='btnClick' > click</button > </div > </template > <script > export default { name:'App' , data() { return { message: 'hello' , name: 'EE' } }, methods: { btnClick() { alert('click??' ); } } } </script > <style scoped > .title { color: blue; } </style >
1 2 3 4 5 6 7 8 9 10 COPY import App from './src/js/vue/app.vue' const app = new Vue({ el: '#app' , template: `<App/>` , components: { App, } })
注意: 需要安装vue-loader vue-template-compiler
1 COPY npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
1 2 3 4 5 COPY { test: /\.vue$/ , use: ['vue-loader' ] }
plugin 添加一个版权提示插件 BannerPlugin是webpack自带的所以不用另外下载
1 2 3 4 5 6 7 COPY const webpack = require ('webpack' )module .exports={ plugins:[ new webpack.BannerPlugin("最终解释权归EE所有" ) ] }
HtmlWebpackPlugin 生成index.html到dist
1 COPY npm install html-webpack-plugin --save-dev
1 2 3 4 5 6 7 8 COPY const HtmlWebpackPlugin = require ('html-webpack-plugin' )plugins:[ new HtmlWebpackPlugin({ template:'index.html' }) ]
JS压缩插件
1 COPY npm install uglifyjs-webpack-plugin --save-dev
1 2 3 4 COPY const UglifyjsWebpackPlugin = require ('uglifyjs-webpack-plugin' )plugins:{ new UgilifyjsWebpackPlugin() }
本地node服务器 本地内存启用服务器,加快调试速度
1 COPY npn install webpack-dev-server --save-dev
1 2 3 4 5 6 COPY devServer:{ contentBase:'./dist' , inline:true , port: }
1 2 3 4 COPY "script" :{ "dev" :"webpack-dev-server --open" }
webpack开发时配置和发布时配置分离 生产和开发时的配置大多数时都不相同,把不同时期的配置文件分开管理是一个比较好的做法
项目根目录下建立文件夹config,包含一下三个文件
**base.config.js:**基础配置
dev.config.js 开发时配置
prod.config.js 生产打包配置
1 COPY npm install webpack-merge --save-dev
1 2 3 4 5 6 7 8 9 10 COPY const webpackMerge = require ('webpack-merge' )const baseConfig = require ('./base.config.js' )module .exports = webpackMerge(baseConfig,{ plugins:[ ... ] })
1 2 3 4 5 6 7 8 9 10 COPY const webpackMerge = require ('webpack-merge' )const baseConfig = require ('./base.config.js' )module .exports = webpackMerge(baseConfig,{ plugins:[ ... ] })
我们需要重新指定package.json里的script项才能使得命令绑定且使用我们想要的配置文件
1 2 3 4 5 COPY "script" :{ "bulid" : "webpack --config ./bulid/prod.config.js" , "dev" :"webpack-dev-server --open --config ./bulid/dev.config.js" }
执行打包
发现打包的文件夹dist放在了当前config目录下
修改base.config.js下
1 COPY path: path.resolve(__dirname, '../dist' ),
Vue CLI(version-3) 快速生成Vue开发环境,自动配置webpack
cnpm
1 COPY npm install -g cnpm --registry=https://registry.npm.taobao.org
CLI安装 1 COPY npm install -g @vue/cli@版本号vue -v
VueCLI(version-2)
1 COPY vue init webpack 项目名
1 2 3 4 5 6 7 8 9 10 11 COPY Project name (项目名) Project description //项目描述 Author //作者 Runtime + Compiler: Runtime-only: Install vue-router? Use ESlint to lint your code? //检查代码规范 Set up unit tests //单元测试 Setup e2e tests with Nightwatch //依赖Nightwatch的端到端测试
runtimeonly 此版下vue工作流程
render -> virtual dom ->DOM
render template
会被解析为render
.vue文件会被解析为render可处理的对象
1 2 3 4 5 6 7 8 COPY render: function (creatElement ) { return createElement('h2' , {class :'box' }, ['content' ,createElement('button' ,[button])] ) }
传入组件对象
1 2 3 4 5 6 7 8 9 10 11 12 COPY const cpn = { template:'<div>hello {{message}}</div>' , data(){ return { message:ee } } } render:function (creatElement ) { return creatElement(cpn) }
runtime + compiler 此版下vue工作流程
template -> ast -> render -> virtual dom ->DOM
ES6箭头函数 多用于将函数作为参数传入时
1 2 3 4 5 6 7 8 COPY const f = function (num ) { } const f = (num ) => { }
单个参数简写 1 2 3 4 5 6 7 8 COPY const f = (num ) => { return num*num } const f = num => { return num*num }
仅一行代码时简写 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 COPY const f = (num ) => { return num*num } const f = (num ) => num*numconst f = (num ) => { console .log(num) } const f = (num ) => console .log(num)
箭头函数中this的指向问题 VUE-router 后端路由 由后端处理URL和HTML文档的映射关系
前后端分离 后端只提供数据,前端请求后端数据并展示
前端路由 SPA页面
仅一个静态资源(html css js) 页面
根据用户意愿来抽离出静态资源的某部分来展示
vue-router
1 COPY npm install --save vue-router
**PS:**CLI创建时可自动安装
配置
src下创建router文件夹
router下创建一个index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 COPY import VueRouter from 'vue-router' import Vue from 'vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path:'' , redirect:'/home' }, { path:' ' , component: } ], mode:'history' }) export default router
1 2 3 4 5 COPY import router from './router/index.js' new Vue({ router: router })
使用
在根vue组件的template中添加
1 2 3 4 5 6 7 COPY <router-link to ='/home1' > </router-link > <router-link to ='/home2' > </router-link > <router-link to ='/home3' > </router-link > <router-view > </router-view >
router-link详解 1 2 3 4 5 6 7 COPY <router-link to ='' tag ='' replace > </router-link >
手动router-link 通过监听点击事件,执行this.$router.push('/home')
或者this.$router.replace('/home')
$router 是vue默认添加的一个数据
动态路由 案例 例:一个用户名为EE,userID:EE9696
我们要进入这个user的页面 即:(/user/EE96966)
就需要动态路由
并且我们需要把此user 的ID:EE展示在其页面上
1 2 3 4 5 6 7 8 9 COPY route:[ { path:user/:userid component: user } ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 COPY <template > <router-link :to ='finalID-path' > </router-link > </template > <script > export default { name:'App' , data(){ return { name:EE ID:EE9696, } }, computed:{ finalID(){ return '/user/' +this .ID } }, } </script >
$route与与展示ID $route 拿到的是当前活跃的路由
注意与**$router区别: $router**拿到的是router对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 COPY <template > <div > <p > ID:{{userID}} </p > </div > </template > <script > export default { computed:{ userID(){ return this .$route.params.userID } } } </script >
路由懒加载 将所有业务代码打包到同一个js文件在网站加载时会非常慢
把不同路由对应的组件封装到不同的js中,这样在需要时再加载会提高效率,即路由的懒加载
使用方法
1 2 3 4 5 6 7 8 COPY import home from '../component/home.vue' const routes = [ { path:'/home' , component:'home' } ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 COPY const routes = [ { path:'/home' , component:()=> import (../component/home.vue) } ] const home = () => import (../component/home.vue)const routes =[ { path:'/home' , component" home } ]
路由嵌套 案例 要在/home
页面下设置/home/news
和/home/message
配置和使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 COPY const routes:[ { path:'/home' , component:home, children:[ { path:'news' , component:news, }, { path:'message' , component:news } ] } ]
因为我们是在home页面下配置的嵌套子路由,所以我们要在home.vue下配置router-link
和router-view
1 2 3 4 5 6 7 8 9 COPY <template > <div > <router-link to ='/home/news' > News</router-link > <router-link to ='/home/message' > Message</router-link > <router-view > </router-view > </div > </template >
PS:嵌套路由也可以默认重定向
路由传参 params
路径配置格式: path: '/router/:id'
=>形成的路径格式/router/id(变值)
获取:直接通过{{$route.params.id(与path中的命名一致)}}
获取
query
$router & $route详解 全局导航守卫 用于监听路由跳转的过程。
beforeEach 1 2 3 4 5 6 7 COPY router.beforeEach((to,from ,next ) => { next() CODE })
afterEach 1 2 3 4 5 COPY router.beforeEach((to.from ) => { CODE })
路由独享守卫 组件内守卫 vue-keepalive vue组件的状态在跳转后不会被保存,每次会创建一个新的组件。这样不仅消耗资源,并且会带来一些使用上的问题
我们使用vue内置组件<keep-alive>
来解决
1 2 COPY <keep-alive > <router-view > </router-view > </keep-alive > <keep-alive include ='' > </keep-alive >
include和exclude参数
include:''
:仅’’内的组件套用keep-alive
exclude:''
:’’外的组件套用keep-alive
''
内为正则表达式或字符串
activated()&deactivated 在当前组件活跃(不活跃)时执行的函数
必须在<keep-alive>
内包含的组件才能使用这两个函数
TabBar实例
**SampleString.indexOf(String)**方法
返回括号内String
在SampleString
第一次出现的位置,若没有出现则返回-1
ES6 Promise Promise 用于封装异步操作
使用方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 COPY new Promise ((resolve,reject ) => { resolve(data) reject(err) }).then( (data ) => { }).catch((err ) => { })
若需要嵌套调用异步操作,则需要在then
或者catch
中返回一个新的Promise
对象
Promise的三种状态
VUEX(待办) axios 安装
导入 1 COPY import axios from axios
基本使用
1 2 3 4 5 COPY axios({ url:'' , params:{} method:'' })
method 省略后也可以简写
例如:
1 2 3 COPY axios.post({ url:'' })
axios.all()发送并发请求 场景: 需要发送两个请求,并且两个请求均返回时再进行处理
可以使用
axios.all()
1 2 3 4 5 6 7 8 9 10 COPY axios.all( [axios({ url:'' }), axios({ url:'' }) ]).then(response => { })
axios的两个常用配置 axios.defaults.baseURL 场景: 需要向’http://sample.com'下频繁发送请求
1 2 3 4 5 COPY axios.defaults.baseURL = 'http://sample.com' axios.get({ url:'/home' })
axios.defaults.timout 设置超时
1 2 COPY axios.defaults.timout = 5000
axios实例 之前设置的axios配置是全局配置,若需要向不同的服务器发送请求,那么全局配置就不适用了,这就需要axios实例
1 2 3 4 COPY const axiosSample = axios.create({ baseURL = '' , timeout = '' })
1 2 3 4 5 6 7 8 COPY axiosSample.get({ url:'' , params:{ type: ... } })
axios封装 设想一下,你的每个程序都是用axios框架发送网络请求,但是某一天axios突然挂掉。那么需要重构的代码量将会非常巨大,为了应对这种情况,我们对框架做一层封装。
基本思路
1 2 3 4 5 6 7 8 9 10 11 12 13 14 COPY import axios from 'axios' export function request (config, success, failure ) { const instance = axios.create({ baseURL: 'http://123.207.32.32:8000' , timeout: 5000 }) instance(config) .then(res => { success(res) }) .catch(err => { failure(err) }) }
使用
现在我们可以使用我们封装好的request函数
1 2 3 4 5 6 7 8 9 10 11 COPY import {request} from '../network/request.js' request({ url:'https://api.coindesk.com/v1/bpi/currentprice.json' }, res =>{ this .info = res.data.bpi }, err=>{ console .log(err) })
更好的封装方式 1 2 3 4 5 6 7 8 9 10 11 12 13 COPY import axios from 'axios' export function request (config ) { return new Promise ((resolve, reject ) => { const instance = axios.create({ baseURL: '' , timeout: 5000 }) instance(config) .then(res => resolve(res)) .catch(err => reject(err)) }) }
如此一来我们可以这样使用
1 2 3 4 5 6 7 COPY import {request} from '../network/request.js' request({ url:'' }) .then(res => {}) .catch(err=?{})
实际上axios返回的就是一个Promise对象,所以我们完全不用自建Promise
1 2 3 4 5 6 7 8 9 COPY import axios from 'axios' export function request (config ) { const instance = axios.create({ baseURL: '' , timeout: 5000 }) return instance(config) }
axios拦截器 为上面的封装添加拦截器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 COPY import axios from 'axios' export function request (config ) { const instance = axios.create({ baseURL: '' , timeout: 5000 }) instance.interceptors.request.use( req=>{ return req }, err=>{ } ); instance.interceptors.response.use( res=>{ return res }, err=>{ } ) return instance(config) }