Vue — 第七天（vue-cli-案例）
生活随笔
收集整理的這篇文章主要介紹了
Vue — 第七天（vue-cli-案例）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
資料獲取地址：
github: https://gitee.com/wang_yu5201314/VUE_vuecli
SSH： git@gitee.com:wang_yu5201314/VUE_vuecli.git
hero案例-項(xiàng)目介紹
功能介紹：
- 三個(gè)模塊
- 英雄列表(只做這個(gè))
- 裝備列表
- 技能列表
- 英雄列表
- 列表組件
- 刪除功能
- 添加組件
- 編輯組件
腳手架工具創(chuàng)建項(xiàng)目
從頭開始創(chuàng)建一個(gè)全新的
- 在桌面，打開命令行窗口 vue create hero-project
- 選擇默認(rèn)創(chuàng)建，defalut(babel,eslint) ，進(jìn)行創(chuàng)建
- 等待下載依賴。完畢后切到項(xiàng)目目錄，執(zhí)行 npm run serve
- 注意：不用關(guān)閉，這個(gè)服務(wù)是預(yù)覽項(xiàng)目。
從現(xiàn)有的項(xiàng)目復(fù)制重命名
要改名的地方如下：
-
文件夾的名字
-
package.json文件中的name
- Readme.md中的內(nèi)容
引入bootstrap,改造app.vue
導(dǎo)入bootstrap到項(xiàng)目中
- 安裝 npm i bootstrap@3.3.7
- 導(dǎo)入main.js
app.vue
container,col-md-2,col-md-10 都是在boostarp.css中要用到的class。
<template><div id="app" class="container"><nav>頂部的導(dǎo)航</nav><div class="col-md-2">側(cè)邊欄 col-md-2 bootstrap中的柵格系統(tǒng)</div><div class="col-md-10">路由容器</div></div> </template><script>// 默認(rèn)導(dǎo)出 export default {// 約定組件的名字。在調(diào)試工具中方便調(diào)試name: 'App',// 這里有一個(gè)組件的嵌套// 2. 在components中注冊(cè)一下你引入的子組件components: {} } </script><style></style>實(shí)現(xiàn)頂部通欄組件
分析布局：
創(chuàng)建組件
components/NavBar.vue按boostrap樣式要求，完成dom
<template><!--實(shí)現(xiàn)頂部的通欄 組件 --><nav class="navbar navbar-inverse"><a href="#" class="navbar-brand">VUE-CLI案例</a></nav> </template> <script> export default {name: 'NavBar' } </script>在app.vue中引入組件
步驟：
實(shí)現(xiàn)左側(cè)側(cè)邊欄組件
創(chuàng)建組件
components/MyAside.vue按boostrap樣式要求，完成dom
<template><!--實(shí)現(xiàn)左側(cè)側(cè)邊欄 --><div class="row"><div class="list-group"><a href="#" class="list-group-item active">英雄列表</a><a href="#" class="list-group-item">裝備列表</a><a href="#" class="list-group-item">技能列表</a></div></div> </template> <script> export default {name: 'MyAside' } </script>在app.vue中引入組件
步驟：
實(shí)現(xiàn)路由
目標(biāo)
- 在支持左側(cè)邊欄中的鏈接顯示不同的內(nèi)容。
思路
引入vue-router
配置路由規(guī)則
給左側(cè)添加聲明式路由導(dǎo)航
在根組件中添加router-view
基本步驟
在vue-cli的項(xiàng)目中，使用路由插件的基本步驟：
安裝vue-router
vue-router是vue的插件，在vue-cli的項(xiàng)目中，我們通過npm包的方式來加載（在.html中，是通過srcript 的src屬性來加載的）
導(dǎo)入并注冊(cè)插件
main.js
在src下創(chuàng)建views文件夾，并在下面放置三個(gè)組件，分別表示路由切換時(shí)的三個(gè)頁面：
src/views/Hero.vue src/views/Zb.vue src/views/Jn.vue每個(gè)頁面組件中，都只需要維持基本內(nèi)容即可。
App.vue
<div class="col-md-10"><!-- 內(nèi)容（路由進(jìn)行切換） --><router-view></router-view> </div>7.直接在地址欄中進(jìn)行測(cè)試
修改左側(cè)導(dǎo)航組件
在components/MyAside.vue中，使用router-link替換之前的a。
<div class="list-group"><router-link to="/hero" class="list-group-item active">英雄列表</router-link><router-link to="/zb" class="list-group-item">裝備列表</router-link><router-link to="/jn" class="list-group-item">技能列表</router-link> </div>再次點(diǎn)擊測(cè)試。
解決打開頁面時(shí)，沒有顯示組件的bug，解決方案，就是主頁重定向一下。
const router = new VueRouter( {routes: [// 主頁重定向// 默認(rèn)顯示hero組件 + {path: '/', redirect:'/hero' },{path: '/hero', component: Hero },{path: '/zb', component: Zb},{path: '/jn', component: Jn}] } )路由激活樣式
目標(biāo)
對(duì)當(dāng)前路由高亮顯示
前置知識(shí)
- router-link-exact-active 精準(zhǔn)匹配時(shí)（地址/hero === to屬性/hero ），加上的類名
- router-link-active 模糊匹配時(shí)（地址/hero/add 以to屬性/hero 開頭），加上的類名
解決方案
方案1
components/MyAside.vue
<style> /* 此時(shí)的樣式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
在初始化路由的時(shí)候提供的配置選項(xiàng)中，添加對(duì)linkExactActiveClass的設(shè)置：給它換個(gè)名字‘a(chǎn)ctive’。（active是bootstrap中內(nèi)置的一個(gè)特殊的類名，有它，則會(huì)有高亮的效果）
main.js
// 創(chuàng)建路由實(shí)例，定義路由規(guī)則 const router = new VueRouter({// 當(dāng)路由與router-link中的to 精確匹配時(shí)，給rotuer-link上添加一個(gè)類，名是activelinkExactActiveClass: 'active',routes: [// 主頁重定向// 默認(rèn)顯示hero組件{path: '/', redirect:'/hero' },{path: '/hero', component: Hero },{path: '/zb', component: Zb},{path: '/jn', component: Jn}] } )示意圖：
提取路由模塊
當(dāng)路由相關(guān)配置，越來越多的時(shí)候，main.js中要用大量的代碼去做路由配置功能。所以：把路由封裝成一個(gè)模塊，提取出去，導(dǎo)入main.js進(jìn)行使用即可。
|-main.js |-router.js分成兩步：
第一步：創(chuàng)建router.js。在其中定義VueRouter實(shí)例，并導(dǎo)出
第二步：在main.js導(dǎo)入
router.js
router.js 配置路由，導(dǎo)出路由實(shí)例。
// 創(chuàng)建路由對(duì)象，并默認(rèn)導(dǎo)出// 導(dǎo)入路由插件 import VueRouter from "vue-router" import Vue from 'vue' // 使用插件 - 重要 Vue.use(VueRouter)// 提前定義好五個(gè)組件，以備在路由中使用 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'// 創(chuàng)建路由實(shí)例 默認(rèn)導(dǎo)出 // 定義路由規(guī)則 export default new VueRouter({// 當(dāng)路由與router-link中的to 精確匹配時(shí)，給rotuer-link上添加一個(gè)類，名是active// active是bootstrap中內(nèi)置的一個(gè)特殊的類名，有它，則會(huì)有高亮的效果linkExactActiveClass: 'active',routes: [// 主頁重定向// 默認(rèn)顯示hero組件{path: '/', redirect:'/hero' },// component : 組件對(duì)象，其中就應(yīng)該有data,template,methods....。{path: '/hero', component: Hero },{path: '/zb', component: Zb },{path: '/jn', component: Jn },{path: '/hero/add', component: HeroAdd },// 動(dòng)態(tài)路由{path: '/hero/edit/:id', component: HeroEdit }]})main.js 中導(dǎo)入路由
導(dǎo)入路由，掛載根實(shí)例即可。
// 配置好路由實(shí)例 import router from './router.js'// 根實(shí)例，掛載路由 new Vue({render: h => h(App),router }).$mount('#app')列表組件
基礎(chǔ)布局
json-server模擬接口
json-server 是一個(gè)全局安裝的工具，用來把.json快速生成RESTful風(fēng)格的接口。
在前面的學(xué)習(xí)中，已經(jīng)全局安裝過。
建立目錄mockdata，在下面放置一個(gè)db.json文件，內(nèi)容如下：
|-src |-src\mockdata\db.json內(nèi)容：
{"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 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)" },{ "id":10003, "heroName": "超人", "gender": "男", "cTime": "2020/10/10 10:10:10" }] }在 db.json 的位置啟動(dòng)數(shù)據(jù)接口服務(wù)器：json-server db.json
驗(yàn)證一下：
axios
在項(xiàng)目中通過npm i axios安裝axios,方便我們來獲取json-server接口服務(wù)器中數(shù)據(jù)。
安裝
之前是<script src=> 來使用axios的，現(xiàn)在要通過第三方包的方式來下載使用。
項(xiàng)目目錄下運(yùn)行如下命令：
npm i axios結(jié)果：
+ axios@0.19.2 added 4 packages from 7 contributors in 26.593s使用
在hero.vue中，測(cè)試axios的使用
通過click事件來測(cè)試使用。
// 1. 引入axiosimport axios from 'axios'export default {name: 'Hero',methods: {hTestAxios () {// 2. 根據(jù)axios的使用格式，發(fā)出一個(gè)請(qǐng)求試一下axios({method: 'get' ,url: 'http://localhost:3000/heroes'}).then(res => {console.log(res)}).catch (err => {console.log(err)})}}}獲取數(shù)據(jù)
補(bǔ)充一個(gè)方法用來發(fā)ajax請(qǐng)求，獲取數(shù)據(jù)，并保存到數(shù)據(jù)項(xiàng)中。
鉤子函數(shù)： created
// hero.vue
// 導(dǎo)入axios import axios from 'axios' export default {data () {// 對(duì)于組件中的數(shù)據(jù)項(xiàng)，一定要用 : data () { return {} }// 只有是new Vue()時(shí)，才能直接寫對(duì)象 new Vue({data: {}})return {list: [// {id:1,heroName:'xxx',gender:'女', cTime: 'XXXXXX'}]}},// 當(dāng)頁面打開時(shí)，去獲取數(shù)據(jù)created () {// 這是一個(gè)鉤子函數(shù)，它會(huì)在當(dāng)前組件創(chuàng)建完成之后，自動(dòng)調(diào)用。// alert(1)// 調(diào)用方法獲取數(shù)據(jù)，保存在list中，則視圖會(huì)自動(dòng)更新this.getData()},methods: {// 獲取數(shù)據(jù)，保存在listgetData () {axios({method: 'get' ,url: 'http://localhost:3000/heroes'}).then(res => {console.log(res)this.list = res.data}).catch (err => {console.log(err)})}} };根據(jù)數(shù)據(jù)進(jìn)行渲染
<table class="table table-hover"><thead><tr><th>ID</th><th>英雄名稱</th><th>英雄性別</th><th>創(chuàng)建時(shí)間</th><th>操作</th></tr></thead><tbody><tr v-for="(item,idx) in list" :key="idx"><td>{{item.id}}</td><td>{{item.heroName}}</td><td>{{item.gender}}</td><td>{{item.cTime}}</td><td><button class="btn btn-success">編輯</button> <button class="btn btn-danger">刪除</button></td></tr></tbody></table>時(shí)間過濾
在hero.vue組件中，對(duì)于時(shí)間的顯示格式不友好，可以采用第三方的包moment來處理。
安裝
npm i moment結(jié)果
+ moment@2.25.3 added 1 package from 6 contributors in 29.174s- 使用moment時(shí)間格式處理模塊
定義過濾器
在hero.vue中引入moment,使用過濾器
// 1.引入 moment.js import moment from "moment"//2. 定義過濾器 {filters: {// 過濾器，它會(huì)把要過濾的元素傳給value,把把函數(shù)的返回值作為格式化之后的結(jié)果顯示出來dateFormat (value) {// console.log(value);// return '123'// 由于直接傳入日期格式并不一定是moment期望的格式，所以這里統(tǒng)一用Date()來處理一下// return moment(value).format('YYYY年MM月DD日')return moment( new Date(value) ).format('YYYY年MM月DD日 hh時(shí)')}}使用過濾器 views/hero.vue
<td>{{item.cTime|dateFormat}}</td>補(bǔ)充：全局過濾器
局部過濾器只能在一個(gè)組件使用，如果希望在整個(gè)項(xiàng)目中的所有組件中使用，則要改成全局過濾器
在main.js中定義全局過濾器。
// 1.引入 moment.js import moment from "moment" // 2.定義全局過濾器 Vue.filter('dateFormat',function(value){// console.log(value);// return '123'// 由于直接傳入日期格式并不一定是moment期望的格式，所以這里統(tǒng)一用Date()來處理一下// return moment(value).format('YYYY年MM月DD日')return moment( new Date(value) ).format('YYYY年MM月DD日 hh時(shí)') })注意：使用 moment() 的時(shí)候傳入date格式可避免警告。
全局過濾器：在多個(gè)組件中用，就定義全局過濾器。
局部過濾器： 只在一個(gè)組件中用，就是可以定義局部過濾器。
刪除功能
實(shí)現(xiàn)大致步驟：
views/hero.vue
<td><button class="btn btn-success">編輯</button> <button @click="hDel(item.id)" class="btn btn-danger" >刪除</button> </td>補(bǔ)充一個(gè)做刪除的方法：
// 發(fā)請(qǐng)求，刪除指定id的數(shù)據(jù) hDel (id) {if(!confirm('你確定要?jiǎng)h除嗎？')){// 如果不刪除return}axios({method: 'delete',url: 'http://localhost:3000/heroes/' + id}).then(res => {console.log(res)// 再次加載數(shù)據(jù)this.getData()}).catch(err => {console.log(err)}) }添加功能
由于這個(gè)添加功能比較復(fù)雜，不方便與列表頁做在一起，這里單獨(dú)來設(shè)置一個(gè)頁面組件來實(shí)現(xiàn)添加功能。
實(shí)現(xiàn)大致步驟：
準(zhǔn)備頁面組件和路由
頁面
新增文件：views/HeroAdd.vue
<template><form @submit.prevent="add()"><legend>添加英雄</legend><div class="form-group"><label>英雄名稱</label><input v-model="hero.heroName" type="text" class="form-control" /></div><div class="form-group"><label>英雄性別</label><div><input type="radio" value="男" v-model="hero.gender"> 男<input type="radio" value="女" v-model="hero.gender"> 女</div></div><button class="btn btn-primary">提交</button></form> </template><script> import axios from 'axios' export default {}; </script>路由
main.js
import HeroAdd from './views/HeroAdd.vue' // 創(chuàng)建路由實(shí)例，定義路由規(guī)則 const router = new VueRouter({// 當(dāng)路由與router-link中的to 精確匹配時(shí)，給rotuer-link上添加一個(gè)類，名是active// active是bootstrap中內(nèi)置的一個(gè)特殊的類名，有它，則會(huì)有高亮的效果linkExactActiveClass: 'active',routes: [// 主頁重定向// 默認(rèn)顯示hero組件{path: '/', redirect:'/hero' },// component : 組件對(duì)象，其中就應(yīng)該有data,template,methods....。{path: '/hero', component: Hero },{path: '/zb', component: Zb },{path: '/jn', component: Jn },{path: '/hero/add', component: HeroAdd }] })補(bǔ)充路由跳轉(zhuǎn)鏈接
views/hero.vue
<router-link to="/hero/add" class="btn btn-primary">添加英雄</router-link>實(shí)現(xiàn)功能
heroAdd.vue
<template> <!-- 對(duì)于表單元素來說，要實(shí)現(xiàn)提交數(shù)據(jù)的功能，有兩個(gè)地方可以添加事件： - 直接對(duì) 提交 按鈕 添加 - 給form添加submit --><form><legend>添加英雄</legend><div class="form-group"><label>英雄名稱</label><input v-model.trim="hero.heroName" type="text" class="form-control" /></div><div class="form-group"><label>英雄性別</label><div><input type="radio" value="男" v-model="hero.gender"> 男<input type="radio" value="女" v-model="hero.gender"> 女</div></div><!-- 對(duì)于form中的button，它有提交表單的默認(rèn)動(dòng)作，這里要阻止 --><button @click.prevent="hAdd" class="btn btn-primary">提交</button></form> </template><script> import axios from "axios" export default {name: 'HeroAdd',data () {return {// 定義的數(shù)據(jù)項(xiàng)是一個(gè)對(duì)象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',// 根據(jù)RESTFul接口要求傳入?yún)?shù)data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}}).then(res => {console.log(res)alert('添加成功')}).catch(err => {console.log(err)alert('添加失敗')})}} } </script><style></style>編輯功能
實(shí)現(xiàn)大致步驟：
準(zhǔn)備頁面組件和路由
頁面組件
新增：views/heroEdit.vue(直接從heroAdd.vue復(fù)制過來的)
<template><form><legend>編輯英雄</legend><div class="form-group"><label>英雄名稱</label><input v-model="hero.heroName" type="text" class="form-control" /></div><div class="form-group"><label>英雄性別</label><div><input type="radio" value="男" v-model="hero.gender" /> 男<input type="radio" value="女" v-model="hero.gender" /> 女</div></div><button class="btn btn-primary">提交</button></form> </template><script> import axios from 'axios' export default {data () {return {hero: {heroName: '',gender: ''}}} </script>設(shè)置路由
main.js
import HeroEdit from './views/HeroEdit.vue' // 創(chuàng)建路由實(shí)例，定義路由規(guī)則 const router = new VueRouter({// 當(dāng)路由與router-link中的to 精確匹配時(shí)，給rotuer-link上添加一個(gè)類，名是active// active是bootstrap中內(nèi)置的一個(gè)特殊的類名，有它，則會(huì)有高亮的效果linkExactActiveClass: 'active',routes: [// 主頁重定向// 默認(rèn)顯示hero組件{path: '/', redirect:'/hero' },// component : 組件對(duì)象，其中就應(yīng)該有data,template,methods....。{path: '/hero', component: Hero },{path: '/zb', component: Zb },{path: '/jn', component: Jn },{path: '/hero/add', component: HeroAdd },// 動(dòng)態(tài)路由{path: '/hero/edit/:id', component: HeroEdit }] })測(cè)試
補(bǔ)充路由跳轉(zhuǎn)
落地項(xiàng)目代碼：
views/hero.vue
<td><!-- 跳轉(zhuǎn)到編輯頁面，并傳入當(dāng)前要編輯的英雄的編號(hào) 跳轉(zhuǎn)頁面帶參數(shù)： XXXXXX --><button @click="hEdit(item.id)" class="btn btn-success">編輯</button> <button @click="hDel(item.id)" class="btn btn-danger" >刪除</button> </td> // 跳轉(zhuǎn)到編輯頁，并傳入當(dāng)前的id hEdit(id) {this.$router.push('/hero/edit/'+id) }實(shí)現(xiàn)功能
思路：
1.發(fā)一次請(qǐng)求，根據(jù)id獲取這個(gè)英雄的詳情并顯示出來
2.用戶在此基礎(chǔ)上進(jìn)行修改，并提交數(shù)據(jù)。
顯示初值
思路：
發(fā)一次請(qǐng)求，根據(jù)id獲取這個(gè)英雄的詳情并顯示出來
要點(diǎn)：
- 定義數(shù)據(jù)項(xiàng)，在表單元素進(jìn)行雙向綁定。
- 定義getHero訪求，根據(jù)id獲取詳情。
- 在created中去調(diào)用getHero
實(shí)現(xiàn)保存
用戶在頁面上進(jìn)行修改，點(diǎn)擊保存，把改動(dòng)通過axios調(diào)用接口，實(shí)現(xiàn)保存。
- 給按鈕添加click事件。
- 在回調(diào)函數(shù)中：
- 收集用戶信息
- 判空
- 調(diào)用接口
項(xiàng)目工作過程
優(yōu)化
axios全局使用
痛點(diǎn)：
- 使用axios來發(fā)送ajax請(qǐng)求，步驟：先導(dǎo)入，再使用。
- 很多組件都使用了axios，所以以上操作經(jīng)常進(jìn)行，工作很重復(fù)。
目標(biāo)
**一次**到導(dǎo)入后，在其他**組件**下，都可以直接使用，那該多好啊！！！方案：
- 目的：在任意組件下訪問axios，通過組件實(shí)例進(jìn)行訪問，this.$http 調(diào)用axios。
- 組件實(shí)例，其實(shí)是vue實(shí)例，vue實(shí)例本質(zhì)通過Vue構(gòu)造函數(shù)得來的。
- 凡是Vue構(gòu)造函數(shù)上擁有的原型屬性，vue實(shí)例也會(huì)擁有。
- 原型屬性：$http $迎合vue的寫法，沒任何含義，指向axios即可。
代碼：
main.js
// 導(dǎo)入axios import axios from "axios" // 給Vue的原型上添加一個(gè)自定義的屬性: 在所有的Vue實(shí)例中均可以訪問這個(gè)屬性 // (組件本質(zhì)也是Vue的實(shí)例，在所有組件內(nèi)部都可以訪問這個(gè)屬性) // 屬性名是: $http ( 是可以更改 ) // 屬性值是：axios Vue.prototype.$http = axios // Vue.prototype.abcccc = 100001其他組件
// 刪除axios的導(dǎo)入 // 將axios改成 this.$http 即可axios基準(zhǔn)地址
痛點(diǎn)：
- 項(xiàng)目中有很多處接口調(diào)用邏輯，其中要使用接口地址。
- 接口的路徑可能不變，但是服務(wù)器地址一定會(huì)變，開發(fā)環(huán)境和 上線環(huán)境使用的服務(wù)器肯定不一樣。
- 服務(wù)器的域名肯定會(huì)變，一旦變化，所有的代碼都需要重新修改，太惡心！！！
方案：
- 在代碼中經(jīng)常出現(xiàn)的數(shù)據(jù)，可以聲明成變量。
- axios提供了默認(rèn)配置，配置接口地址中，前一段相同的地址（域名地址）
- 你在調(diào)用接口的時(shí)候，可有只寫除去 前一段相同的地址，寫簡短的路徑即可。
- axios在發(fā)請(qǐng)求的時(shí)候，自己根據(jù)配置的路徑 + 你調(diào)用接口簡短路徑 進(jìn)行拼接，調(diào)用接口。
- 前一段相同的地址(基準(zhǔn)地址) baseURL
代碼：
main.js
// 導(dǎo)入axios掛載在Vue的原型上，將來任意vue實(shí)例都可以訪問。 import axios from 'axios' +// 基準(zhǔn)地址 +axios.defaults.baseURL = 'http://localhost:3000/' Vue.prototype.$http = axios其他組件：
// 其他組件 接口地址 刪除 http://localhost:3000/ // 例如： this.$http({method: 'PUT', //完整修改url: '/heroes/' + this.$route.params.id,// 根據(jù)RESTFul接口要求傳入?yún)?shù)data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}})是Vue構(gòu)造函數(shù)上擁有的原型屬性，vue實(shí)例也會(huì)擁有。
- 原型屬性：$http $迎合vue的寫法，沒任何含義，指向axios即可。
代碼：
main.js
// 導(dǎo)入axios import axios from "axios" // 給Vue的原型上添加一個(gè)自定義的屬性: 在所有的Vue實(shí)例中均可以訪問這個(gè)屬性 // (組件本質(zhì)也是Vue的實(shí)例，在所有組件內(nèi)部都可以訪問這個(gè)屬性) // 屬性名是: $http ( 是可以更改 ) // 屬性值是：axios Vue.prototype.$http = axios // Vue.prototype.abcccc = 100001其他組件
// 刪除axios的導(dǎo)入 // 將axios改成 this.$http 即可axios基準(zhǔn)地址
痛點(diǎn)：
- 項(xiàng)目中有很多處接口調(diào)用邏輯，其中要使用接口地址。
- 接口的路徑可能不變，但是服務(wù)器地址一定會(huì)變，開發(fā)環(huán)境和 上線環(huán)境使用的服務(wù)器肯定不一樣。
- 服務(wù)器的域名肯定會(huì)變，一旦變化，所有的代碼都需要重新修改，太惡心！！！
方案：
- 在代碼中經(jīng)常出現(xiàn)的數(shù)據(jù)，可以聲明成變量。
- axios提供了默認(rèn)配置，配置接口地址中，前一段相同的地址（域名地址）
- 你在調(diào)用接口的時(shí)候，可有只寫除去 前一段相同的地址，寫簡短的路徑即可。
- axios在發(fā)請(qǐng)求的時(shí)候，自己根據(jù)配置的路徑 + 你調(diào)用接口簡短路徑 進(jìn)行拼接，調(diào)用接口。
- 前一段相同的地址(基準(zhǔn)地址) baseURL
代碼：
main.js
// 導(dǎo)入axios掛載在Vue的原型上，將來任意vue實(shí)例都可以訪問。 import axios from 'axios' +// 基準(zhǔn)地址 +axios.defaults.baseURL = 'http://localhost:3000/' Vue.prototype.$http = axios其他組件：
// 其他組件 接口地址 刪除 http://localhost:3000/ // 例如： this.$http({method: 'PUT', //完整修改url: '/heroes/' + this.$route.params.id,// 根據(jù)RESTFul接口要求傳入?yún)?shù)data: {heroName : this.hero.heroName,gender: this.hero.gender,cTime: new Date()}}) 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的Vue — 第七天（vue-cli-案例）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue — 第六天（vue-cli-介绍
- 下一篇： webpack — 概述介绍