基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目
前言
就在前段時(shí)間,vue官方發(fā)布了3.0.0-beta.1 版本,趁著五一假期有時(shí)間,就把之前的一個(gè)電商商城的項(xiàng)目,用最新的Composition API拿來改造一下!
GitHub地址請(qǐng)?jiān)L問:https://github.com/GitHubGanKai/vue3-jd-h5
項(xiàng)目介紹
vue-jd-h5是一個(gè)電商H5頁面前端項(xiàng)目,基于Vue 3.0.0-beta.1 + Vant 實(shí)現(xiàn),主要包括首頁、分類頁面、我的頁面、購物車等。
本地線下代碼vue2.6在分支demo中,使用mockjs數(shù)據(jù)進(jìn)行開發(fā),效果圖請(qǐng)點(diǎn)擊這里
master分支是線上生產(chǎn)環(huán)境代碼,因?yàn)椴糠趾笈_(tái)接口已經(jīng)掛了,不建議使用!
本項(xiàng)目還有很多不足之處,如果有想為此做貢獻(xiàn)的伙伴,也歡迎給我們提出PR,或者issue ;
本項(xiàng)目是免費(fèi)開源的,如果有伙伴想要在次基礎(chǔ)上進(jìn)行二次開發(fā),可以clone或者fork整個(gè)倉庫,如果能幫助到您,我將感到非常高興,如果您覺得這個(gè)項(xiàng)目不錯(cuò)還請(qǐng)給個(gè)start!
搭建步驟
首先,選擇一個(gè)文件,將代碼clone到本地:
git clone https://github.com/GitHubGanKai/vue-jd-h5.git
查看所有分支:
gankaideMacBook-Pro:vue-jd-h5 gankai$ git branch -a demo demo_vue3 dev feature gh-pages * master remotes/origin/HEAD -> origin/master remotes/origin/demo remotes/origin/demo_vue3 remotes/origin/dev remotes/origin/feature remotes/origin/gh-pages remotes/origin/master
切換到分支demo_vue3開始進(jìn)行開發(fā)!
項(xiàng)目的初始化
如果你在安裝包的時(shí)候速度比較慢,那是因?yàn)镹PM服務(wù)器在國外,這里給大家推薦一個(gè)可以隨時(shí)切換NPM鏡像的工具NRM,有時(shí)候,我們開發(fā)的時(shí)候,為了加快安裝包的安裝速度,我們需要切換鏡像源為國內(nèi)的,但是,如果需要發(fā)布一些自己的組件到NPM的時(shí)候,又要來回切換回來,有了這個(gè)我們就方便多了!使用$ npm install -g nrm
全局安裝,然后,可以使用nrm ls
查看所有鏡像:
gankaideMacBook-Pro:~ gankai$ nrm ls npm -------- https://registry.npmjs.org/ * yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.org/ taobao ----- https://registry.npm.taobao.org/ nj --------- https://registry.nodejitsu.com/ npmMirror -- https://skimdb.npmjs.com/registry/ edunpm ----- http://registry.enpmjs.org/
如果需要使用淘寶鏡像,執(zhí)行: nrm use taobao
可以隨時(shí)切換源,當(dāng)然了還有一個(gè)npm包版本管理工具nvm,主要是管理包版本的,如果有興趣的小伙伴,可以自己去了解一下,這里就不啰嗦了!
安裝
進(jìn)入剛才clone下來的項(xiàng)目根目錄,安裝@vue/composition-api
體驗(yàn) vue3 新特性。
npm安裝:
npm install @vue/composition-api --save
yarn安裝:
yarn add @vue/composition-api
CDN
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
通過全局變量 window.vueCompositionApi 來使用。
使用
在使用任何 @vue/composition-api 提供的能力前,必須先通過 Vue.use() 進(jìn)行安裝:
在入口文件main.js中:
import Vue from 'vue'; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
安裝插件后,您就可以使用新的Composition API 來開發(fā)組件了。
⚠️目前vue官方為vue-cli提供了一個(gè)插件vue-cli-plugin-vue-next,你也可以直接在項(xiàng)目中直接添加最新的版本!
# in an existing Vue CLI project vue add vue-next
如果有想從零開始體驗(yàn)新版本的小伙伴可以采用這種方法進(jìn)行安裝,由于我們這個(gè)項(xiàng)目有依賴第三方庫,如果全局安裝,整個(gè)項(xiàng)目第三方UI庫都無法運(yùn)行!所以我們還是選擇采用安裝@vue/composition-api來進(jìn)行體驗(yàn),從而慢慢過渡到vue3最新版本
Vue 3.0 Composition-API基本特性體驗(yàn)
setup函數(shù)
setup() 函數(shù)是 vue3 中專門為組件提供的新屬性,相當(dāng)于2.x版本中的created函數(shù),之前版本的組件邏輯選項(xiàng),現(xiàn)在都統(tǒng)一放在這個(gè)函數(shù)中處理。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口,具體聲明周期相關(guān)勾子,可以參考如下:
vue2.x | vue3 |
---|---|
setup(替代) | |
setup(替代) | |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
errorCaptured | onErrorCaptured |
ps:感謝評(píng)論區(qū)小伙伴提出的疑問:如果你的項(xiàng)目是在vue2.x的基礎(chǔ)上,再安裝Composition API 來開發(fā)的,那么, setup 函數(shù),會(huì)在 beforeCreate 之后created 之前執(zhí)行!如果你是直接通過vue add vue-next安裝最新的 vue3.0.x beta,那么setup會(huì)在beforeCreate和created之前執(zhí)行!
新鉤子
除了2.x生命周期等效項(xiàng)之外,Composition API還提供了以下debug hooks:
- onRenderTracked
- onRenderTriggered
兩個(gè)鉤子都收到DebuggerEvent類似于onTrack和onTrigger觀察者的選項(xiàng):
export default { onRenderTriggered(e) { debugger // inspect which dependency is causing the component to re-render } }
依賴注入
provide和inject啟用類似于2.x provide/inject選項(xiàng)的依賴項(xiàng)注入。兩者都只能在setup()當(dāng)前活動(dòng)實(shí)例期間調(diào)用。
import { provide, inject } from '@vue/composition-api' const ThemeSymbol = Symbol() const Ancestor = { setup() { provide(ThemeSymbol, 'dark') } } const Descendent = { setup() { const theme = inject(ThemeSymbol, 'light' /* optional default value */) return { theme } } }
inject接受可選的默認(rèn)值作為第二個(gè)參數(shù)。如果未提供默認(rèn)值,并且在Provide上下文中找不到該屬性,則inject返回undefined。
注入響應(yīng)式數(shù)據(jù)
為了保持提供的值和注入的值之間的響應(yīng)式,可以使用ref
// 在父組建中 const themeRef = ref('dark') provide(ThemeSymbol, themeRef) // 組件中 const theme = inject(ThemeSymbol, ref('light')) watchEffect(() => { console.log(`theme set to: ${theme.value}`) })
因?yàn)閟etup函數(shù)接收2個(gè)形參,第一個(gè)是initProps,即父組建傳送過來的值!,第二個(gè)形參是一個(gè)上下文對(duì)象
setupContext,這個(gè)對(duì)象的主要屬性有 :
attrs: Object // 等同 vue 2.x中的 this.$attrs emit: ƒ () // 等同 this.$emit() isServer: false // 是否是服務(wù)端渲染 listeners: Object // 等同 vue2.x中的this.$listeners parent: VueComponent // 等同 vue2.x中的this.$parent refs: Object // 等同 vue2.x中的this.$refs root: Vue // 這個(gè)root是我們?cè)趍ain.js中,使用newVue()的時(shí)候,返回的全局唯一的實(shí)例對(duì)象,注意別和單文件組建中的this混淆了 slots: {} // 等同 vue2.x中的this.$slots ssrContext:{} // 服務(wù)端渲染相關(guān)
⚠️注意:在 setup() 函數(shù)中無法訪問到 this的,不管這個(gè)this指的是全局的的vue對(duì)象(即:在main.js 中使用new生成的那個(gè)全局的vue實(shí)例對(duì)象),還是指單文件組建的對(duì)象。
但是,如果我們想要訪問當(dāng)前組件的實(shí)例對(duì)象,那該怎么辦呢?我們可以引入getCurrentInstance這個(gè)api,返回值就是當(dāng)前組建的實(shí)例!
import { computed, getCurrentInstance } from "@vue/composition-api"; export default { name: "svg-icon", props: { iconClass: { type: String, required: true }, className: { type: String } }, setup(initProps,setupContext) { // ⚠️注意,如果是通過vue add vue-next添加的這個(gè)地方需要結(jié)構(gòu)出ctx const ctx = getCurrentInstance(); const iconName = computed(() => { return `#icon-${initProps.iconClass}`; }); const svgClass = computed(() => { if (initProps.className) { return "svg-icon " + initProps.className; } else { return "svg-icon"; } }); return { iconName, svgClass }; } }; </script>
Ref自動(dòng)展開(unwrap)
ref() 函數(shù)用來根據(jù)給定的值創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象,ref() 函數(shù)調(diào)用的返回值是一個(gè)被包裝后的對(duì)象(RefImpl),這個(gè)對(duì)象上只有一個(gè) .value 屬性,如果我們?cè)趕etup函數(shù)中,想要訪問的對(duì)象的值,可以通過.value來獲取,但是如果是在<template>模版中,直接訪問即可,不需要.value!
import { ref } from '@vue/composition-api' setup() { const active = ref(""); const timeData = ref(36000000); console.log('輸出===>',timeData.value) return { active, timeData } }
<template> <p>活動(dòng)狀態(tài):{{active}}</p> <p>活動(dòng)時(shí)間:{{timeData}}</p> </template>
⚠️注意:不要將Array放入ref中,數(shù)組索引屬性無法進(jìn)行自動(dòng)展開,也不要使用 Array 直接存取 ref 對(duì)象:
const state = reactive({ list: [ref(0)], }); // 不會(huì)自動(dòng)展開, 須使用 `.value` state.list[0].value === 0; // true state.list.push(ref(1)); // 不會(huì)自動(dòng)展開, 須使用 `.value` state.list[1].value === 1; // true
當(dāng)我們需要操作DOM的時(shí)候,比如我們?cè)陧?xiàng)目中使用swiper需要獲取DOM,那么我們還可以這樣!
<div class="swiper-cls"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(img ,index) in tabImgs.value" :key="index"> <img class="slide_img" @click="handleClick(img.linkUrl)" :src="img.imgUrl" /> </swiper-slide> </swiper> </div>
然后在setup函數(shù)中定義一個(gè)const mySwiper = ref(null);,之前在vue2.x中,我們是通過this.$refs.mySwiper來獲取DOM對(duì)象的,現(xiàn)在也可以使用ref函數(shù)代替,返回的mySwiper要和template中綁定的ref相同!
import { ref, onMounted } from "@vue/composition-api"; setup(props, { attrs, slots, parent, root, emit, refs }) { const mySwiper = ref(null); onMounted(() => { // 通過mySwiper.value 即可獲取到DOM對(duì)象! // 同時(shí)也可以使用vue2.x中的refs.mySwiper ,他其實(shí)mySwiper.value 是同一個(gè)DOM對(duì)象! mySwiper.value.swiper.slideTo(3, 1000, false); }); return { mySwiper } }
reactive
reactive() 函數(shù)接收一個(gè)普通對(duì)象,返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象,等價(jià)于 vue 2.x 中的 Vue.observable() 函數(shù),vue 3.x 中提供了 reactive() 函數(shù),用來創(chuàng)建響應(yīng)式的數(shù)據(jù)對(duì)象Observer,ref中我們一般存放的是基本類型數(shù)據(jù),如果是引用類型的我們可以使用reactive函數(shù)。
當(dāng)reactive函數(shù)中,接收的類型是一個(gè)Array數(shù)組的時(shí)候,我們可以在這個(gè)Array外面在用對(duì)象包裹一層,然后給對(duì)象添加一個(gè)屬性比如:value(這個(gè)屬性名你可以自己隨便叫什么),他的值就是這個(gè)數(shù)組!
<script> // 使用相關(guān)aip之前必須先引入 import { ref, reactive } from "@vue/composition-api"; export default { name: "home", setup(props, { attrs, slots, parent, root, emit, refs }) { const active = ref(""); const timeData = ref(36000000); // 將tabImgs數(shù)組中每個(gè)對(duì)象都變成響應(yīng)式的對(duì)象 const tabImgs = reactive({ value: [] }); const ball = reactive({ show: false, el: "" }); return { active, timeData, tabImgs, ...toRefs(ball), }; } }; </script>
那么在template模版中我們想要訪問這個(gè)數(shù)組的時(shí)候就是需要使用.value的形式來獲取這個(gè)數(shù)組的值。
<template> <div class="swiper-cls"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(img ,index) in tabImgs.value" :key="index"> <img class="slide_img" @click="handleClick(img.linkUrl)" :src="img.imgUrl" /> </swiper-slide> </swiper> </div> </template>
isRef
isRef() 用來判斷某個(gè)值是否為 ref() 創(chuàng)建出來的對(duì)象;當(dāng)需要展開某個(gè)可能為 ref() 創(chuàng)建出來的值的時(shí)候,可以使用isRef來判斷!
import { isRef } from '@vue/composition-api' setup(){ const headerActive = ref(false); // 在setup函數(shù)中,如果是響應(yīng)式的對(duì)象,在訪問屬性的時(shí)候,一定要加上.value來訪問! const unwrapped = isRef(headerActive) ? headerActive.value : headerActive return {} }
toRefs
toRefs函數(shù)會(huì)將響應(yīng)式對(duì)象轉(zhuǎn)換為普通對(duì)象,其中返回的對(duì)象上的每個(gè)屬性都是指向原始對(duì)象中相應(yīng)屬性的ref,將一個(gè)對(duì)象上的所有屬性轉(zhuǎn)換成響應(yīng)式的時(shí)候,將會(huì)非常有用!
import { reactive,toRefs } from '@vue/composition-api' setup(){ // ball 是一個(gè) Observer const ball = reactive({ show: false, el: "" }); // ballToRefs 就是一個(gè)普通的Object,但是ballToRefs里面的所有屬性都是響應(yīng)式的(RefImpl) const ballToRefs = toRefs(ball) // ref和原始屬性是“鏈接的” ball.show = true console.log(ballToRefs.show) // true ballToRefs.show.value = false console.log(ballToRefs.show) // false return { ...ballToRefs // 將ballToRefs對(duì)象展開,我們就可以直接在template模板中直接這樣使用這個(gè)對(duì)象上的所有屬性! } }
點(diǎn)擊添加按鈕,小球飛入購物車動(dòng)畫:
<template> <div class="ballWrap"> <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter"> <!-- 可以直接使用show--> <div class="ball" v-if="show"> <li class="inner"> <span class="cubeic-add" @click="addToCart($event,item)"> <svg-icon class="add-icon" icon-class="add"></svg-icon> </span> </li> </div> </transition> </div> </template>
computed
computed函數(shù)的第一個(gè)參數(shù),可以接收一個(gè)函數(shù),或者是一個(gè)對(duì)象!如果是函數(shù)默認(rèn)是getter函數(shù),并為getter返回的值返回一個(gè)只讀的ref對(duì)象。
import { computed } from '@vue/composition-api' const count = ref(1) // computed接收一個(gè)函數(shù)作為入?yún)? const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 錯(cuò)誤,plusOne是只讀的!
或者也可以是個(gè)對(duì)象,可以使用具有g(shù)et和set功能的對(duì)象來創(chuàng)建可寫ref對(duì)象。
const count = ref(1) // computed接收一個(gè)對(duì)象作為入?yún)? const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0
watch
watch(source, cb, options?)
該watchAPI與2.x this.$watch(以及相應(yīng)的watch選項(xiàng))完全等效。
觀察單一來源
觀察者數(shù)據(jù)源可以是返回值的getter函數(shù),也可以直接是ref:
// watching a getter函數(shù) const state = reactive({ count: 0 }) watch( () => state.count, // 返回值的getter函數(shù) (count, prevCount,onCleanup) => { /* ... */ } ) // directly watching a ref const count = ref(0) watch( count, // 也可以直接是ref (count, prevCount,onCleanup) => { /* ... */ })
watch多個(gè)來源
觀察者還可以使用數(shù)組同時(shí)監(jiān)視多個(gè)源:
const me = reactive({ age: 24, name: 'gk' }) // reactive類型的 watch( [() => me.age, () => me.name], // 監(jiān)聽reactive多個(gè)數(shù)據(jù)源,可以傳入一個(gè)數(shù)組類型,返回getter函數(shù) ([age, name], [oldAge, oldName]) => { console.log(age) // 新的 age 值 console.log(name) // 新的 name 值 console.log(oldAge) // 舊的 age 值 console.log(oldName) // 新的 name 值 }, // options { lazy: true //默認(rèn) 在 watch 被創(chuàng)建的時(shí)候執(zhí)行回調(diào)函數(shù)中的代碼,如果lazy為true ,怎創(chuàng)建的時(shí)候,不執(zhí)行! } ) setInterval(() => { me.age++ me.name = 'oldMe' }, 7000000) // ref類型的 const work = ref('web') const addres = ref('sz') watch( [work,address], // 監(jiān)聽多個(gè)ref數(shù)據(jù)源 ([work, addres], [oldwork, oldaddres]) => { //...... }, { lazy: true } )
watch和組件的生命周期綁定,當(dāng)組件卸載后,watch也將自動(dòng)停止。在其他情況下,它返回停止句柄,可以調(diào)用該句柄以顯式停止觀察程序:
// watch 返回一個(gè)函數(shù)句柄,我們可以決定該watch的停止和開始! const stopWatch = watch( [work,address], // 監(jiān)聽多個(gè)ref數(shù)據(jù)源 ([work, addres], [oldwork, oldaddres]) => { //...... }, { lazy: true } ) // 調(diào)用停止函數(shù),清除對(duì)work和address的監(jiān)視 stopWatch()
在 watch 中清除無效的異步任務(wù)
<div class="search-con"> <svg-icon class="search-icon" icon-class="search"></svg-icon> <input v-focus placeholder="搜索、關(guān)鍵詞" v-model="searchText" /> </div>
setup(props, { attrs, slots, parent, root, emit, refs }){ const CancelToken = root.$http.CancelToken const source = CancelToken.source() // 定義響應(yīng)式數(shù)據(jù) searchText const searchText = ref('') // 向后臺(tái)發(fā)送異步請(qǐng)求 const getSearchResult = searchText => { root.$http.post("http://test.happymmall.com/search",{text:searchText}, { cancelToken: source.token }).then(res => { // ..... }); return source.cancel } // 定義 watch 監(jiān)聽 watch( searchText, (searchText, oldSearchText, onCleanup) => { // 發(fā)送axios請(qǐng)求,并得到取消axios請(qǐng)求的 cancel函數(shù) const cancel = getSearchResult(searchText) // 若 watch 監(jiān)聽被重復(fù)執(zhí)行了,則會(huì)先清除上次未完成的異步請(qǐng)求 onCleanup(cancel) }, // watch 剛被創(chuàng)建的時(shí)候不執(zhí)行 { lazy: true } ) return { searchText } }
最后
vue3新增 Composition API。新的 API 兼容 Vue2.x,只需要在項(xiàng)目中單獨(dú)引入 @vue/composition-api 這個(gè)包就能夠解決我們目前 Vue2.x中存在的個(gè)別難題。比如:如何組織邏輯,以及如何在多個(gè)組件之間抽取和復(fù)用邏輯?;?Vue 2.x 目前的 API 我們有一些常見的邏輯復(fù)用模式,但都或多或少存在一些問題:
這些模式包括:
- Mixins
- 高階組件 (Higher-order Components, aka HOCs)
- Renderless Components (基于 scoped slots / 作用域插槽封裝邏輯的組件)
總體來說,以上這些模式存在以下問題:
- 模版中的數(shù)據(jù)來源不清晰。舉例來說,當(dāng)一個(gè)組件中使用了多個(gè) mixin 的時(shí)候,光看模版會(huì)很難分清一個(gè)屬性到底是來自哪一個(gè) mixin。HOC 也有類似的問題。
- 命名空間沖突。由不同開發(fā)者開發(fā)的 mixin 無法保證不會(huì)正好用到一樣的屬性或是方法名。HOC 在注入的 props 中也存在類似問題。
- 性能。HOC 和 Renderless Components 都需要額外的組件實(shí)例嵌套來封裝邏輯,導(dǎo)致無謂的性能開銷。
vue3中,新增 Composition API。而且新的API兼容 Vue2.x,只需要在項(xiàng)目中,單獨(dú)引入 @vue/composition-api 這個(gè)包就可以,就能夠解決我們目前 以上大部分問題。同時(shí),如果我直接升級(jí)到 Vue3.x,我要做的事情會(huì)更多,只要當(dāng)前項(xiàng)目中使用到的第三方ui庫,都需要重新改造,以及升級(jí)后的諸多坑要填!剛開始的時(shí)候,我就是直接在當(dāng)前腳手架的基礎(chǔ)上 vue add vue-next 安裝升級(jí),但是只要是有依賴第三方生態(tài)庫的地方,就有許多的坑。。。
Vue3.x 沒有導(dǎo)出默認(rèn)對(duì)象 export default,在第三方生態(tài)中,常用Vue.xxx()來進(jìn)行依賴,現(xiàn)在這些語法需要重寫,工作量可不小??!
如果是新團(tuán)隊(duì)、小型的項(xiàng)目,可以嘗試使用vue3進(jìn)行嘗試開發(fā),慢慢過度,當(dāng) Vue3.x 正式 發(fā)布 后,而且周邊生態(tài)跟上來了,就可以直接用vue3了!
在bilibili直播的時(shí)候,Evan You也說了,目前vue3 beta版本,最重要的是提升穩(wěn)定性,和對(duì)第三方工具庫的支持,如果你是第三方庫的作者,可以現(xiàn)在開始,熟悉熟悉源碼了,我們開發(fā)者可以先讀懂所有API的使用。
抱歉
⚠️本項(xiàng)目當(dāng)前只修改了src/views/home/index.vue和src/views/classify/index.vue這兩個(gè)文件,但是,其他的修改也都一樣,如果有興趣的小伙伴可以自己fork過去,將其他頁面也用Composition API再寫一遍,自己練練手!熟悉一下新API,同時(shí)我也會(huì)將其他的頁面慢慢完善起來!大家一起⛽️加油!當(dāng)官方正式發(fā)布版本之后,我們可以快速上手!希望和大家江湖再見!
到此這篇關(guān)于基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目的文章就介紹到這了,更多相關(guān)vue3.0.1beta搭建電商H5項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程,其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡(jiǎn)單的方法,可用組件router-link來替代a標(biāo)簽,每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)
不管是移動(dòng)端的適配,還是大屏需求,都離不開不一個(gè)單位rem,rem是相對(duì)于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關(guān)于vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的相關(guān)資料,需要的朋友可以參考下2021-08-08vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07