淺談使用Vue完成移動(dòng)端apk項(xiàng)目
更新時(shí)間：2021年06月10日 09:30:12 作者：David涼宸
這幾天，我做了一個(gè)vue移動(dòng)端的小項(xiàng)目，本文主要介紹了Vue移動(dòng)端apk項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們項(xiàng)目使用的是Vue和Vant組件，詳情都可以看官網(wǎng)哦
目錄結(jié)構(gòu)：
基本配置
入口文件main.js
首先做一個(gè)引入
我們的Vant UI組件是按需引入，而Element UI是全部引入
所以引用方式也不同
main.js完整代碼
// 引入Vue
import Vue from 'vue'
// 引入根組件App.vue
import App from './App.vue'
// 引入router路由
import router from './router'
import store from './store'
// 引入axios
import axios from 'axios'
// 引入ElementUI
import ElementUI from 'element-ui'
// 引入ElementUI css
import 'element-ui/lib/theme-chalk/index.css'
// 引入Vant配置js
import 'amfe-flexible/index.js'
// 這里引入需要的Vant組件
import {
Rate, Popup, Form, Field, GoodsActionButton, GoodsActionIcon, GoodsAction, Sidebar,
SidebarItem, Image as VanImage, Skeleton, SwipeCell, Col, Row,
CountDown, Lazyload, SwipeItem, Swipe, Sku, AddressList, Area,
AddressEdit, NavBar, SubmitBar, CheckboxGroup, Checkbox, Card,
Image, GridItem, Grid, Cell, Switch, Button, Search, Tab, Tabs,
Tabbar, TabbarItem, Icon, DropdownMenu, DropdownItem, Toast, CellGroup,
Overlay, PasswordInput, NumberKeyboard, Loading, ShareSheet, Dialog, ImagePreview, Uploader
} from 'vant'
// 引入vuex
Vue.config.productionTip = false
// 這里引用Vant組件
Vue.use(Search)
.use(Rate)
.use(Popup)
.use(ImagePreview)
.use(Uploader)
.use(Dialog)
.use(ShareSheet)
.use(Loading)
.use(Overlay)
.use(PasswordInput)
.use(NumberKeyboard)
.use(Form)
.use(CellGroup)
.use(Toast)
.use(Field)
.use(GoodsActionButton)
.use(GoodsActionIcon)
.use(GoodsAction)
.use(Sidebar)
.use(SidebarItem)
.use(VanImage)
.use(Skeleton)
.use(SwipeCell)
.use(Col)
.use(Row)
.use(CountDown)
.use(Lazyload)
.use(SwipeItem)
.use(Swipe)
.use(Sku)
.use(AddressList)
.use(Area)
.use(AddressEdit)
.use(NavBar)
.use(SubmitBar)
.use(CheckboxGroup)
.use(Checkbox)
.use(Card)
.use(Image)
.use(GridItem)
.use(Cell)
.use(Grid)
.use(Switch)
.use(Button)
.use(DropdownItem)
.use(DropdownMenu)
.use(Icon)
.use(Tab)
.use(Tabs)
.use(Tabbar)
.use(TabbarItem)
// 全局引用ElementUI組件
Vue.use(ElementUI)
// 設(shè)置axios掛載點(diǎn)
Vue.prototype.$http = axios
// 配置axios的基準(zhǔn)地址
axios.defaults.baseURL = 'http://127.0.0.1:3000/api'
// 設(shè)置開(kāi)發(fā)模式和非開(kāi)發(fā)模式引用后臺(tái)地址
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:3000/api' : '/api'
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
App.vue
tabbar設(shè)置，我們引用的Vant組件中tabbar組件
van-tabbar官網(wǎng)屬性介紹看這即可
我們定義了一個(gè)數(shù)組Showlist，這是我們?cè)O(shè)置是否現(xiàn)在tabbar，如果name名和數(shù)組的內(nèi)容可以匹配到就顯示，否則不顯示，watch就是來(lái)監(jiān)聽(tīng)的
完整代碼
<template>
<div id="app">
<router-view />
<div class="after"></div>
<van-tabbar
v-model="active"
fixed
border
active-color="#bb54f6"
route
v-show="isShowNav"
>
<van-tabbar-item class="iconfont icon-rhome-fill" to="/home">
首頁(yè)
</van-tabbar-item>
<van-tabbar-item
class="iconfont icon-leimupinleifenleileibie2"
to="/category"
>
分類(lèi)
</van-tabbar-item>
<van-tabbar-item class="iconfont icon-u138" to="/find">
發(fā)現(xiàn)
</van-tabbar-item>
<van-tabbar-item class="iconfont icon-qicheqianlian-" to="/shopping">
購(gòu)物車(chē)
</van-tabbar-item>
<van-tabbar-item class="iconfont icon-wodedangxuan" to="/myuser">
我的
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data () {
return {
active: 0,
isShowNav: true,
Showlist: ['Home', 'Shoping', 'Find', 'Category', 'MyUser']
}
},
watch: {
$route (to, from) {
if (this.Showlist.includes(to.name)) {
this.isShowNav = true
} else if (to.name === '') {
this.isShowNav = false
} else {
this.isShowNav = false
}
}
}
}
</script>
<style>
#app {
width: 100%;
height: 100%;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,
body {
width: 100%;
height: 100%;
}
</style>
首頁(yè)
首頁(yè)
頭部搜索欄
主體
使用的是Vant組件的search組件
官網(wǎng)介紹
這一塊都是對(duì)應(yīng)的下面每個(gè)模塊內(nèi)容都是嵌套在里面的
tab
優(yōu)選模塊
輪播圖
我們?cè)赿ata中定義了輪播圖所需要的圖片變量images 我們?cè)谶@循環(huán)輸出即可
輪播圖的圖片我是寫(xiě)死的，有需要可以自己去獲取一下哦
十宮格
秒殺
獲取一天的倒計(jì)時(shí)
然后在created函數(shù)中調(diào)用
商品
請(qǐng)求接口獲取所以商品信息（也需要在created函數(shù)中調(diào)用哦）
其他模塊都是類(lèi)似的
完整代碼：
<template>
<div class="home">
<div class="header">
<van-search
v-model="value"
show-action
shape="round"
background="#890bf2"
placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
@search="search"
>
<template #action>
<i
class="iconfont icon-xiaoxi"
style="font-size: 30px; color: white"
></i>
</template>
</van-search>
<van-tabs
v-model="actives"
background="#890bf2"
title-inactive-color="white"
title-active-color="white"
color="#fff"
>
<van-tab title="優(yōu)選" :width="500">
<!-- 輪播圖 -->
<van-swipe :autoplay="3000" class="my-swipe1">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
</van-swipe>
<!-- 十宮格部分 -->
<van-grid :column-num="5">
<van-grid-item v-for="value in gird" :key="value.id">
<div @click="xxx(value.name)">
<i :class="value.icon" style="font-size: 35px; color: red"> </i>
</div>
<b style="font-size: 16px">{{ value.name }}</b>
</van-grid-item>
</van-grid>
<!-- 秒殺部分 -->
<div class="supply">
<div class="seckill">
<van-count-down :time="time" style="font-size: 14px; color: red">
<template #default="timeData">
<span>距離秒殺結(jié)束時(shí)間：</span>
<span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template>
</van-count-down>
</div>
<div class="shop">
<ul>
<li
v-for="item in supplyShop"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src="item.shop_img" alt="" />
</li>
</ul>
</div>
</div>
<!-- 商品 -->
<div class="otherShop">
<ul>
<li
v-for="item in otherShop"
:key="item.id"
@click="detailshop(item.id)"
>
<a href="JavaScript:;"><img :src="item.shop_img" alt="" /></a>
<a href="JavaScript:;" style="color: #000"
><p>
{{ item.shop_title }}
</p></a
>
</li>
</ul>
</div>
</van-tab>
<van-tab title="手機(jī)">
<van-grid :column-num="4">
<van-grid-item
v-for="value in phoneimg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div class="otherPhone">
<ul>
<li
v-for="item in otherPhone"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src="item.shop_img" alt="" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
<van-tab title="運(yùn)動(dòng)">
<van-grid :column-num="5">
<van-grid-item
v-for="value in motionimg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div class="othermotion">
<ul>
<li
v-for="item in othermotion"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src="item.shop_img" alt="" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
<van-tab title="美妝">
<van-grid :column-num="5">
<van-grid-item
v-for="value in Makeupimg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div class="otherMakeup">
<ul>
<li
@click="detailshop(item.id)"
v-for="item in otherMakeup"
:key="item.id"
>
<img :src="item.shop_img" alt="" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
<van-tab title="男鞋">
<van-grid :column-num="5">
<van-grid-item
v-for="value in Menshopimg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div class="otherMenshop">
<ul>
<li
@click="detailshop(item.id)"
v-for="item in otherMenshop"
:key="item.id"
>
<img :src="item.shop_img" alt="" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
<van-tab title="女鞋">
<van-grid :column-num="5">
<van-grid-item
v-for="value in WoMenshopimg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div class="otherWoMenshop">
<ul>
<li
v-for="item in otherWoMenshop"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src="item.shop_img" alt="" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
<van-tab title="家具家居">
<van-grid :column-num="5">
<van-grid-item
v-for="value in FurnishingImg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div class="otherFurnishing">
<ul>
<li
v-for="item in otherFurnishing"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src="item.shop_img" alt="" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
actives: 0,
time: '',
// 輪播圖圖片
images: [
'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/165251/27/8980/194778/60409b0aE6d2ff3df/ca0c808809dbbfa8.jpg!q70.jpg.dpg',
'http://imgcps.jd.com/ling4/10027168852797/54mb5LuU6KOk5Zyw5pa554m56Imy/6ZKc5oOg55av5oqi/p-5c17126882acdd181dd53cf1/018cd345/cr_1125x445_0_171/s1125x690/q70.jpg',
'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/163716/23/16055/97374/6066f2cfEe720735f/3f4d05450bc1f7fc.jpg!q70.jpg.dpg'
],
// 宮格
gird: [
{ id: 1, icon: 'iconfont icon-shouji', name: '手機(jī)' },
{ id: 2, icon: 'iconfont icon-bingxiang', name: '冰箱' },
{ id: 3, icon: 'iconfont icon-xiyiji', name: '洗衣機(jī)' },
{ id: 4, icon: 'iconfont icon-dianshi', name: '電視' },
{ id: 5, icon: 'iconfont icon-youyanjiB', name: '油煙機(jī)' },
{ id: 6, icon: 'iconfont icon-reshuiqi', name: '熱水器' },
{ id: 7, icon: 'iconfont icon-jiaju', name: '家居' },
{ id: 8, icon: 'iconfont icon-dianfanbao', name: '電飯煲' },
{ id: 9, icon: 'iconfont icon-deng', name: '臺(tái)燈' },
{ id: 10, icon: 'iconfont icon-chufangyongpin-ranqizao', name: '燃?xì)庠? }
],
// 秒殺商品
supplyShop: [],
// 其他商品
otherShop: [],
// 手機(jī)頁(yè)
phoneimg: [],
// 其他手機(jī)商品
otherPhone: [],
// 運(yùn)動(dòng)頁(yè)
motionimg: [],
// 其他運(yùn)動(dòng)商品
othermotion: [],
// 美妝頁(yè)
Makeupimg: [],
// 其他美妝商品
otherMakeup: [],
// 男鞋頁(yè)
Menshopimg: [],
// 其他男鞋商品
otherMenshop: [],
// 女鞋頁(yè)
WoMenshopimg: [],
// 其他女鞋商品
otherWoMenshop: [],
// 家居頁(yè)
FurnishingImg: [],
// 其他家居商品
otherFurnishing: []
}
},
created () {
this.CountDown()
this.loadershop()
},
methods: {
// 搜索商品
search (value) {
this.$router.push({ name: 'SchCont', params: { value } })
},
// 倒計(jì)時(shí)
CountDown () {
var myDate = new Date()
var hour = 24 - myDate.getHours()
this.time = hour * 60 * 60 * 1000
},
// 獲取商品信息
async loadershop () {
// 獲取所有商品 賦值給優(yōu)選頁(yè)模塊
const Allshop = await this.$http.get('list?id=100')
this.otherShop = Allshop.data.data
// 獲取手機(jī)商品 賦值給手機(jī)頁(yè)模塊
const phone = await this.$http.get('details?id=2')
this.otherPhone = phone.data.data
// 獲取運(yùn)動(dòng)商品 賦值給運(yùn)動(dòng)頁(yè)模塊
const play = await this.$http.get('details?id=3')
this.othermotion = play.data.data
// 獲取美妝商品 賦值給美妝頁(yè)模塊
const Makeup = await this.$http.get('details?id=4')
this.otherMakeup = Makeup.data.data
// 獲取男鞋商品 賦值給男鞋頁(yè)模塊
const Menshop = await this.$http.get('details?id=5')
this.otherMenshop = Menshop.data.data
// 獲取女鞋商品 賦值給女鞋頁(yè)模塊
const WoMenshop = await this.$http.get('details?id=6')
this.otherWoMenshop = WoMenshop.data.data
// 獲取家居家具商品 賦值給家居家具頁(yè)模塊
const Furnishing = await this.$http.get('details?id=7')
this.otherFurnishing = Furnishing.data.data
// 獲取秒殺商品 賦值給秒殺模塊
const miaosha = await this.$http.get('list_m')
this.supplyShop = miaosha.data.data
},
// 調(diào)轉(zhuǎn)詳情頁(yè)
detailshop (id) {
this.$router.push({ name: 'Details', params: { id: id, urls: '/home' } })
},
// 跳轉(zhuǎn)優(yōu)選宮格詳情
xxx (id) {
this.$router.push({ name: 'SchCont', params: { value: id } })
}
}
}
</script>
<style lang="less" scoped>
.home {
width: 100%;
height: 100%;
.header {
.van-tabs {
margin-top: -5px;
}
}
}
.van-tabbar {
.van-tabbar-item {
display: flex;
flex-direction: column;
}
}
// 輪播圖
.my-swipe1 {
width: 300px;
height: 150px;
margin-left: 35px;
margin-top: 20px;
img {
width: 300px;
height: 150px;
}
box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
}
// 十宮格
.van-grid {
margin-top: 10px;
box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
}
// 秒殺
.supply {
width: 100%;
height: 120px;
margin-top: 10px;
box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
.shop {
ul {
list-style: none;
li {
float: left;
margin-left: 13px;
img {
margin-top: 10px;
width: 80px;
}
}
}
}
}
// 其他商品
.otherShop {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
}
img {
width: 150px;
}
}
}
}
//其他手機(jī)商品
.otherPhone {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//其他運(yùn)動(dòng)商品
.othermotion {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//其他美妝商品
.otherMakeup {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//其他男鞋商品
.otherMenshop {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//其他女鞋商品
.otherWoMenshop {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
// 其他家居商品
.otherFurnishing {
margin-top: 20px;
ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-bottom: 40px;
li {
width: 170px;
height: 220px;
font-size: 14px;
p {
width: 170px;
overflow: hidden; //超出的文本隱藏
white-space: nowrap; //溢出不換行
text-overflow: ellipsis; //溢出用省略號(hào)顯示
text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
</style>
到此這篇關(guān)于淺談使用Vue完成移動(dòng)端apk項(xiàng)目的文章就介紹到這了,更多相關(guān)Vue完成移動(dòng)端apk項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名
這篇文章主要為大家詳細(xì)介紹了基于vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Vue實(shí)現(xiàn)靠邊懸浮球(PC端)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問(wèn)題及解決方法
這篇文章主要介紹了解決vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問(wèn)題,本文通過(guò)兩種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時(shí)要顯示聲明props。下面通過(guò)一個(gè)例子給大家介紹Vue中父組件向子組件通信的方法，需要的朋友參考下吧2017-07-07
vue中如何監(jiān)聽(tīng)url地址欄參數(shù)變化
這篇文章主要介紹了vue中如何監(jiān)聽(tīng)url地址欄參數(shù)變化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue事件處理原理及過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說(shuō)明和用法介紹
這篇文章主要給大家介紹了關(guān)于vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說(shuō)明和用法的相關(guān)資料,如果您想在Vue中使用字典查詢(xún),您可以使用Vue的計(jì)算屬性和方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解
本篇文章主要介紹了Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫(kù),適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿(mǎn)足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下2023-08-08