网站建设 客户要退款,道县找人做网站,山东省住房建设部网站首页,小程序开发公司哪家正规资料获取地址#xff1a;
github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH#xff1a; gitgitee.com:wang_yu5201314/VUE_vuecli.git
hero案例-项目介绍 功能介绍#xff1a;
三个模块 英雄列表(只做这个)装备列表技能列表 英雄列表 列表组件删除功能添加组件编…资料获取地址
github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH gitgitee.com:wang_yu5201314/VUE_vuecli.git
hero案例-项目介绍 功能介绍
三个模块 英雄列表(只做这个)装备列表技能列表 英雄列表 列表组件删除功能添加组件编辑组件 脚手架工具创建项目
从头开始创建一个全新的
在桌面打开命令行窗口 vue create hero-project选择默认创建defalut(babel,eslint) 进行创建等待下载依赖。完毕后切到项目目录执行 npm run serve注意不用关闭这个服务是预览项目。
从现有的项目复制重命名
要改名的地方如下 文件夹的名字 package.json文件中的name Readme.md中的内容
引入bootstrap,改造app.vue
导入bootstrap到项目中
安装 npm i bootstrap3.3.7导入main.js
// main.js
import bootstrap/dist/css/bootstrap.min.cssapp.vue
container,col-md-2,col-md-10 都是在boostarp.css中要用到的class。
templatediv idapp classcontainernav顶部的导航/navdiv classcol-md-2侧边栏 col-md-2 bootstrap中的栅格系统/divdiv classcol-md-10路由容器/div/div
/templatescript// 默认导出
export default {// 约定组件的名字。在调试工具中方便调试name: App,// 这里有一个组件的嵌套// 2. 在components中注册一下你引入的子组件components: {}
}
/scriptstyle/style
实现顶部通栏组件
分析布局 创建组件
components/NavBar.vue按boostrap样式要求完成dom
template!--实现顶部的通栏 组件 --nav classnavbar navbar-inversea href# classnavbar-brandVUE-CLI案例/a/nav
/template
script
export default {name: NavBar
}
/script在app.vue中引入组件
步骤
导入注册组件在模板中使用
templatediv idapp classcontainer!-- nav顶部的导航/nav --nav-bar/nav-bardiv classcol-md-2侧边栏 col-md-2 bootstrap中的栅格系统/divdiv classcol-md-10路由容器/div/div
/templatescript
// 1.导入NavBar.vue
import NavBar from ./components/NavBar.vue// 默认导出
export default {// 约定组件的名字。在调试工具中方便调试name: App,// 这里有一个组件的嵌套// 2. 在components中注册一下你引入的子组件components: {NavBar}
}
/scriptstyle/style
实现左侧侧边栏组件
创建组件
components/MyAside.vue按boostrap样式要求完成dom
template!--实现左侧侧边栏 --div classrowdiv classlist-groupa href# classlist-group-item active英雄列表/aa href# classlist-group-item装备列表/aa href# classlist-group-item技能列表/a/div/div
/template
script
export default {name: MyAside
}
/script在app.vue中引入组件
步骤
导入注册组件在模板中使用
templatediv idapp classcontainer!-- nav顶部的导航/nav --nav-bar/nav-bardiv classcol-md-2!-- 侧边栏 col-md-2 bootstrap中的栅格系统 --my-aside/my-aside/divdiv classcol-md-10路由容器/div/div
/templatescript
// 1.导入NavBar.vue
import NavBar from ./components/NavBar.vueimport MyAside from ./components/MyAside.vue// 默认导出
export default {// 约定组件的名字。在调试工具中方便调试name: App,// 这里有一个组件的嵌套// 2. 在components中注册一下你引入的子组件components: {NavBar,MyAside}
}
/scriptstyle/style
实现路由
目标
在支持左侧边栏中的链接显示不同的内容。
思路
引入vue-router
配置路由规则
给左侧添加声明式路由导航
在根组件中添加router-view
基本步骤
在vue-cli的项目中使用路由插件的基本步骤 安装vue-router vue-router是vue的插件在vue-cli的项目中我们通过npm包的方式来加载在.html中是通过srcript 的src属性来加载的
npm i vue-router导入并注册插件 main.js
import VueRouter from vue-routerVue.use(VueRouter) //注册插件(**重要**)准备页面组件
在src下创建views文件夹并在下面放置三个组件分别表示路由切换时的三个页面
src/views/Hero.vue
src/views/Zb.vue
src/views/Jn.vue 每个页面组件中都只需要维持基本内容即可。
导入组件初始化插件路由规则配置
// 提前定义好三个组件以备在路由中使用
import Hero from ./views/Hero.vue
import Zb from ./views/Zb.vue
import Jn from ./views/Jn.vue
// 创建路由实例定义路由规则
const router new VueRouter( {routes: [{path: /hero, component: Hero },{path: /zb, component: Zb},{path: /jn, component: Jn}]
} )const router new VueRouter({routes})把vueRouter挂载在vue实例上
new Vue({render: h h(App),router
}).$mount(#app)在根组件中使用router-view设置路由出口
App.vue
div classcol-md-10!-- 内容路由进行切换 --router-view/router-view
/div7.直接在地址栏中进行测试
修改左侧导航组件
在components/MyAside.vue中使用router-link替换之前的a。
div classlist-grouprouter-link to/hero classlist-group-item active英雄列表/router-linkrouter-link to/zb classlist-group-item装备列表/router-linkrouter-link to/jn classlist-group-item技能列表/router-link
/div再次点击测试。
解决打开页面时没有显示组件的bug解决方案就是主页重定向一下。
const router new VueRouter( {routes: [// 主页重定向// 默认显示hero组件{path: /, redirect:/hero },{path: /hero, component: Hero },{path: /zb, component: Zb},{path: /jn, component: Jn}]
} )路由激活样式
目标
对当前路由高亮显示 前置知识
vue-router会根据路由地址给router-link解析后的a标签加上类
router-link-exact-active 精准匹配时地址/hero to属性/hero 加上的类名router-link-active 模糊匹配时地址/hero/add 以to属性/hero 开头加上的类名
bootstrap有一个类active表示菜单选中的样式 。
解决方案
方案1 在bootstrap中抄出 active的样式再加给router-link-exact-active类中。方案2通过设置VueRouter配置指定 router-link-exact-active时的类名为active。
方案1
components/MyAside.vue
style
/* 此时的样式router-link-active需要和bootstrap的active样式一致 */
.list-group-item.router-link-exact-active,
.list-group-item.router-link-exact-active:focus,
.list-group-item.router-link-active:hover {z-index: 2;color: #fff;background-color: #337ab7;border-color: #337ab7;
}
/style方案2
在初始化路由的时候提供的配置选项中添加对linkExactActiveClass的设置给它换个名字‘active’。active是bootstrap中内置的一个特殊的类名有它则会有高亮的效果
main.js
// 创建路由实例定义路由规则
const router new VueRouter({// 当路由与router-link中的to 精确匹配时给rotuer-link上添加一个类名是activelinkExactActiveClass: active,routes: [// 主页重定向// 默认显示hero组件{path: /, redirect:/hero },{path: /hero, component: Hero },{path: /zb, component: Zb},{path: /jn, component: Jn}]
} )
示意图 提取路由模块
当路由相关配置越来越多的时候main.js中要用大量的代码去做路由配置功能。所以把路由封装成一个模块提取出去导入main.js进行使用即可。
|-main.js
|-router.js分成两步
第一步创建router.js。在其中定义VueRouter实例并导出
第二步在main.js导入
router.js
router.js 配置路由导出路由实例。
// 创建路由对象并默认导出// 导入路由插件
import VueRouter from vue-router
import Vue from vue // 使用插件 - 重要
Vue.use(VueRouter)// 提前定义好五个组件以备在路由中使用
import Hero from ./views/Hero.vue
import Zb from ./views/Zb.vue
import Jn from ./views/Jn.vue
import HeroAdd from ./views/HeroAdd.vue
import HeroEdit from ./views/HeroEdit.vue// 创建路由实例 默认导出
// 定义路由规则
export default new VueRouter({// 当路由与router-link中的to 精确匹配时给rotuer-link上添加一个类名是active// active是bootstrap中内置的一个特殊的类名有它则会有高亮的效果linkExactActiveClass: active,routes: [// 主页重定向// 默认显示hero组件{path: /, redirect:/hero },// component : 组件对象其中就应该有data,template,methods....。{path: /hero, component: Hero },{path: /zb, component: Zb },{path: /jn, component: Jn },{path: /hero/add, component: HeroAdd },// 动态路由{path: /hero/edit/:id, component: HeroEdit }]})
main.js 中导入路由
导入路由挂载根实例即可。
// 配置好路由实例
import router from ./router.js// 根实例挂载路由
new Vue({render: h h(App),router
}).$mount(#app)列表组件
基础布局
进行组件的基础布局
templatediva href# classbtn btn-primary添加英雄/ahr /table classtable table-hovertheadtrthID/thth英雄名称/thth英雄性别/thth创建时间/thth操作/th/tr/theadtbodytrtd101/tdtd亚索/tdtd男/tdtd2019-02-10 10:50:12/tdtdbutton classbtn btn-success编辑/buttonnbsp;button classbtn btn-danger删除/button/td/tr/tbody/table/div
/templatescript
export default {};
/scriptjson-server模拟接口 json-server 是一个全局安装的工具用来把.json快速生成RESTful风格的接口。 在前面的学习中已经全局安装过。 建立目录mockdata在下面放置一个db.json文件内容如下
|-src
|-src\mockdata\db.json内容
{heroes:[{ id:10000, heroName: 安妮, gender: 女, cTime: 2010-10-10 10:10:10 },{ id:10001, heroName: 德玛西亚, gender: 男, cTime: 2014-10-10 10:10:10 },{ id:10002, heroName: 刘三姐, gender: 女, cTime: Fri Apr 17 2020 16:24:42 GMT0800 (中国标准时间) },{ id:10003, heroName: 超人, gender: 男, cTime: 2020/10/10 10:10:10 }]
}在 db.json 的位置启动数据接口服务器json-server db.json 验证一下 axios
在项目中通过npm i axios安装axios,方便我们来获取json-server接口服务器中数据。
安装
之前是script src 来使用axios的现在要通过第三方包的方式来下载使用。
项目目录下运行如下命令
npm i axios结果 axios0.19.2
added 4 packages from 7 contributors in 26.593s使用
在hero.vue中测试axios的使用
通过click事件来测试使用。
// 1. 引入axiosimport axios from axiosexport default {name: Hero,methods: {hTestAxios () {// 2. 根据axios的使用格式发出一个请求试一下axios({method: get ,url: http://localhost:3000/heroes}).then(res {console.log(res)}).catch (err {console.log(err)})}}}获取数据
补充一个方法用来发ajax请求获取数据并保存到数据项中。
钩子函数 created
// hero.vue
// 导入axios
import axios from axios
export default {data () {// 对于组件中的数据项一定要用 : data () { return {} }// 只有是new Vue()时才能直接写对象 new Vue({data: {}})return {list: [// {id:1,heroName:xxx,gender:女, cTime: XXXXXX}]}},// 当页面打开时去获取数据created () {// 这是一个钩子函数它会在当前组件创建完成之后自动调用。// alert(1)// 调用方法获取数据保存在list中则视图会自动更新this.getData()},methods: {// 获取数据保存在listgetData () {axios({method: get ,url: http://localhost:3000/heroes}).then(res {console.log(res)this.list res.data}).catch (err {console.log(err)})}}
};根据数据进行渲染
table classtable table-hovertheadtrthID/thth英雄名称/thth英雄性别/thth创建时间/thth操作/th/tr/theadtbodytr v-for(item,idx) in list :keyidxtd{{item.id}}/tdtd{{item.heroName}}/tdtd{{item.gender}}/tdtd{{item.cTime}}/tdtdbutton classbtn btn-success编辑/buttonnbsp;button classbtn btn-danger删除/button/td/tr/tbody/table时间过滤
在hero.vue组件中对于时间的显示格式不友好可以采用第三方的包moment来处理。
安装
npm i moment结果 moment2.25.3
added 1 package from 6 contributors in 29.174s使用moment时间格式处理模块
moment(需要格式转换的事件).format(YYYY-MM-DD hh:mm:ss)定义过滤器
在hero.vue中引入moment,使用过滤器
// 1.引入 moment.js
import moment from moment//2. 定义过滤器
{filters: {// 过滤器它会把要过滤的元素传给value,把把函数的返回值作为格式化之后的结果显示出来dateFormat (value) {// console.log(value);// return 123// 由于直接传入日期格式并不一定是moment期望的格式所以这里统一用Date()来处理一下// return moment(value).format(YYYY年MM月DD日)return moment( new Date(value) ).format(YYYY年MM月DD日 hh时)}}使用过滤器 views/hero.vue
td{{item.cTime|dateFormat}}/td补充全局过滤器 局部过滤器只能在一个组件使用如果希望在整个项目中的所有组件中使用则要改成全局过滤器 在main.js中定义全局过滤器。
// 1.引入 moment.js
import moment from moment
// 2.定义全局过滤器
Vue.filter(dateFormat,function(value){// console.log(value);// return 123// 由于直接传入日期格式并不一定是moment期望的格式所以这里统一用Date()来处理一下// return moment(value).format(YYYY年MM月DD日)return moment( new Date(value) ).format(YYYY年MM月DD日 hh时)
})
注意使用 moment() 的时候传入date格式可避免警告。 全局过滤器在多个组件中用就定义全局过滤器。 局部过滤器 只在一个组件中用就是可以定义局部过滤器。 删除功能 实现大致步骤
绑定点击事件弹出确认框点击确认上传请求删除成功更新列表
views/hero.vue
tdbutton classbtn btn-success编辑/buttonnbsp;button clickhDel(item.id) classbtn btn-danger 删除/button
/td补充一个做删除的方法
// 发请求删除指定id的数据
hDel (id) {if(!confirm(你确定要删除吗)){// 如果不删除return}axios({method: delete,url: http://localhost:3000/heroes/ id}).then(res {console.log(res)// 再次加载数据this.getData()}).catch(err {console.log(err)})
}添加功能
由于这个添加功能比较复杂不方便与列表页做在一起这里单独来设置一个页面组件来实现添加功能。
实现大致步骤
将英雄列表组件添加按钮改成router-link跳转到 /hero/add 路由地址。定义路由规则创建添加组件指定这个添加组件。完成添加组件中的基础布局表单,双向绑定表单元素。监听表单提交事件调用添加接口进行添加操作。成功的时候跳转到英雄列表组件。失败错误提示。
准备页面组件和路由
页面
新增文件views/HeroAdd.vue
templateform submit.preventadd()legend添加英雄/legenddiv classform-grouplabel英雄名称/labelinput v-modelhero.heroName typetext classform-control //divdiv classform-grouplabel英雄性别/labeldivinput typeradio value男 v-modelhero.gender 男input typeradio value女 v-modelhero.gender 女/div/divbutton classbtn btn-primary提交/button/form
/templatescript
import axios from axios
export default {};
/script
路由
main.js
import HeroAdd from ./views/HeroAdd.vue// 创建路由实例定义路由规则
const router new VueRouter({// 当路由与router-link中的to 精确匹配时给rotuer-link上添加一个类名是active// active是bootstrap中内置的一个特殊的类名有它则会有高亮的效果linkExactActiveClass: active,routes: [// 主页重定向// 默认显示hero组件{path: /, redirect:/hero },// component : 组件对象其中就应该有data,template,methods....。{path: /hero, component: Hero },{path: /zb, component: Zb },{path: /jn, component: Jn },{path: /hero/add, component: HeroAdd }]
})补充路由跳转链接
views/hero.vue
router-link to/hero/add classbtn btn-primary添加英雄/router-link实现功能
添加v-model,给表单元素添加双向绑定 以获取用户输入的数据添加button添加点击事件提交ajax
heroAdd.vue
template
!-- 对于表单元素来说要实现提交数据的功能有两个地方可以添加事件
- 直接对 提交 按钮 添加
- 给form添加submit --formlegend添加英雄/legenddiv classform-grouplabel英雄名称/labelinput v-model.trimhero.heroName typetext classform-control //divdiv classform-grouplabel英雄性别/labeldivinput typeradio value男 v-modelhero.gender 男input typeradio value女 v-modelhero.gender 女/div/div!-- 对于form中的button它有提交表单的默认动作这里要阻止 --button click.preventhAdd classbtn btn-primary提交/button/form
/templatescript
import axios from axios
export default {name: HeroAdd,data () {return {// 定义的数据项是一个对象hero: {heroName: ,gender: 男}}},methods: {hAdd () {// 1. 获取用户的输入// 2. 判断是否为空console.log(this.hero)if(this.hero.heroName ) {return }// 3. ajax提交axios({method: POST,url: http://localhost:3000/heroes,// 根据RESTFul接口要求传入参数data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}}).then(res {console.log(res)alert(添加成功)}).catch(err {console.log(err)alert(添加失败)})}}
}
/scriptstyle/style编辑功能
实现大致步骤
在英雄列表给编辑按钮绑定点击事件跳转到编辑组件/hero/edit/:id。创建编辑组件配置路由规则使用的动态路由规则完成编辑组件中的基础布局表单,双向绑定表单元素。在组件初始化的时候获取当英雄数据填充给表单。监听表单的提交事件进行编辑请求的发送。成功跳转英雄列表进行预览失败错误提示。
准备页面组件和路由
页面组件
新增views/heroEdit.vue(直接从heroAdd.vue复制过来的)
templateformlegend编辑英雄/legenddiv classform-grouplabel英雄名称/labelinput v-modelhero.heroName typetext classform-control //divdiv classform-grouplabel英雄性别/labeldivinput typeradio value男 v-modelhero.gender / 男input typeradio value女 v-modelhero.gender / 女/div/divbutton classbtn btn-primary提交/button/form
/templatescript
import axios from axios
export default {data () {return {hero: {heroName: ,gender: }}}
/script设置路由
main.js
import HeroEdit from ./views/HeroEdit.vue
// 创建路由实例定义路由规则
const router new VueRouter({// 当路由与router-link中的to 精确匹配时给rotuer-link上添加一个类名是active// active是bootstrap中内置的一个特殊的类名有它则会有高亮的效果linkExactActiveClass: active,routes: [// 主页重定向// 默认显示hero组件{path: /, redirect:/hero },// component : 组件对象其中就应该有data,template,methods....。{path: /hero, component: Hero },{path: /zb, component: Zb },{path: /jn, component: Jn },{path: /hero/add, component: HeroAdd },// 动态路由{path: /hero/edit/:id, component: HeroEdit }]
})测试
补充路由跳转
落地项目代码
views/hero.vue
td!-- 跳转到编辑页面并传入当前要编辑的英雄的编号
跳转页面带参数 XXXXXX
--button clickhEdit(item.id) classbtn btn-success编辑/buttonnbsp;button clickhDel(item.id) classbtn btn-danger 删除/button
/td// 跳转到编辑页并传入当前的id
hEdit(id) {this.$router.push(/hero/edit/id)
}实现功能
思路
1.发一次请求根据id获取这个英雄的详情并显示出来
2.用户在此基础上进行修改并提交数据。
显示初值
思路
发一次请求根据id获取这个英雄的详情并显示出来
要点
定义数据项在表单元素进行双向绑定。定义getHero访求根据id获取详情。在created中去调用getHero
template
!-- 对于表单元素来说要实现提交数据的功能有两个地方可以添加事件
- 直接对 提交 按钮 添加
- 给form添加submit --formbutton click.prevent$router.push(/hero) classbtn返回/buttonlegend编辑英雄{{this.$route.params.id}}/legenddiv classform-grouplabel英雄名称/labelinput v-model.trimhero.heroName typetext classform-control //divdiv classform-grouplabel英雄性别/labeldivinput typeradio value男 v-modelhero.gender 男input typeradio value女 v-modelhero.gender 女/div/div!-- 对于form中的button它有提交表单的默认动作这里要阻止 --button classbtn btn-primary提交/button/form
/templatescript
import axios from axios
export default {name: HeroAdd,data () {return {// 定义的数据项是一个对象hero: {heroName: ,gender: 男}}},// 在组件创建完时根据id获取这个英雄的详情并显示出来 created () {this.getHero()},methods: {getHero() {// 根据id获取这个英雄的详情并显示出来 axios({method: GET,url: http://localhost:3000/heroes/ this.$route.params.id}).then(res {console.log(res) // 把取回的数据保存在数据项 hero中this.hero.heroName res.data.heroNamethis.hero.gender res.data.gender// 页面上立即就显示了数据出来 // 由于我们采用v-model双向绑定所以一旦数据变化了视图会跟着变化}).catch(err {console.log(err);})}}
}
/scriptstyle/style实现保存
用户在页面上进行修改点击保存把改动通过axios调用接口实现保存。
给按钮添加click事件。在回调函数中 收集用户信息判空调用接口
!-- 对于form中的button它有提交表单的默认动作这里要阻止 --button click.preventhSave classbtn btn-primary保存/buttonhSave () {// 1. 获取用户的输入// 2. 判断是否为空console.log(this.hero)if(this.hero.heroName ) {return }// 3. ajax提交 - 修改axios({method: PUT, //完整修改url: http://localhost:3000/heroes/ this.$route.params.id,// 根据RESTFul接口要求传入参数data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}}).then(res {console.log(res)// alert(修改成功)// 实现修改成功之后自动跳回到英雄列表页。// 编程式导航 通过代码的方式来进行页面的跳转this.$router.push(/hero) }).catch(err {console.log(err)alert(修改失败)})
}项目工作过程 优化
axios全局使用
痛点
使用axios来发送ajax请求步骤先导入再使用。很多组件都使用了axios所以以上操作经常进行工作很重复。
目标
**一次**到导入后在其他**组件**下都可以直接使用那该多好啊方案
目的在任意组件下访问axios通过组件实例进行访问this.$http 调用axios。组件实例其实是vue实例vue实例本质通过Vue构造函数得来的。 凡是Vue构造函数上拥有的原型属性vue实例也会拥有。 原型属性$http $迎合vue的写法没任何含义指向axios即可。
代码
main.js
// 导入axios
import axios from axios
// 给Vue的原型上添加一个自定义的属性: 在所有的Vue实例中均可以访问这个属性
// (组件本质也是Vue的实例在所有组件内部都可以访问这个属性)
// 属性名是: $http ( 是可以更改 )
// 属性值是axios
Vue.prototype.$http axios
// Vue.prototype.abcccc 100001其他组件
// 删除axios的导入
// 将axios改成 this.$http 即可axios基准地址
痛点
项目中有很多处接口调用逻辑其中要使用接口地址。接口的路径可能不变但是服务器地址一定会变开发环境和 上线环境使用的服务器肯定不一样。服务器的域名肯定会变一旦变化所有的代码都需要重新修改太恶心
方案
在代码中经常出现的数据可以声明成变量。axios提供了默认配置配置接口地址中前一段相同的地址域名地址你在调用接口的时候可有只写除去 前一段相同的地址写简短的路径即可。axios在发请求的时候自己根据配置的路径 你调用接口简短路径 进行拼接调用接口。前一段相同的地址(基准地址) baseURL
代码
main.js
// 导入axios挂载在Vue的原型上将来任意vue实例都可以访问。
import axios from axios
// 基准地址
axios.defaults.baseURL http://localhost:3000/
Vue.prototype.$http axios其他组件
// 其他组件 接口地址 删除 http://localhost:3000/
// 例如
this.$http({method: PUT, //完整修改url: /heroes/ this.$route.params.id,// 根据RESTFul接口要求传入参数data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}})是Vue构造函数上拥有的原型属性vue实例也会拥有。
原型属性$http $迎合vue的写法没任何含义指向axios即可。
代码
main.js
// 导入axios
import axios from axios
// 给Vue的原型上添加一个自定义的属性: 在所有的Vue实例中均可以访问这个属性
// (组件本质也是Vue的实例在所有组件内部都可以访问这个属性)
// 属性名是: $http ( 是可以更改 )
// 属性值是axios
Vue.prototype.$http axios
// Vue.prototype.abcccc 100001其他组件
// 删除axios的导入
// 将axios改成 this.$http 即可axios基准地址
痛点
项目中有很多处接口调用逻辑其中要使用接口地址。接口的路径可能不变但是服务器地址一定会变开发环境和 上线环境使用的服务器肯定不一样。服务器的域名肯定会变一旦变化所有的代码都需要重新修改太恶心
方案
在代码中经常出现的数据可以声明成变量。axios提供了默认配置配置接口地址中前一段相同的地址域名地址你在调用接口的时候可有只写除去 前一段相同的地址写简短的路径即可。axios在发请求的时候自己根据配置的路径 你调用接口简短路径 进行拼接调用接口。前一段相同的地址(基准地址) baseURL
代码
main.js
// 导入axios挂载在Vue的原型上将来任意vue实例都可以访问。
import axios from axios
// 基准地址
axios.defaults.baseURL http://localhost:3000/
Vue.prototype.$http axios其他组件
// 其他组件 接口地址 删除 http://localhost:3000/
// 例如
this.$http({method: PUT, //完整修改url: /heroes/ this.$route.params.id,// 根据RESTFul接口要求传入参数data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}})
