欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目

 更新時(shí)間:2020年05月06日 11:13:39   作者:將源兵魂  
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

就在前段時(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
beforeCreate setup(替代)
created 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 / 作用域插槽封裝邏輯的組件)

總體來說,以上這些模式存在以下問題:

  1. 模版中的數(shù)據(jù)來源不清晰。舉例來說,當(dāng)一個(gè)組件中使用了多個(gè) mixin 的時(shí)候,光看模版會(huì)很難分清一個(gè)屬性到底是來自哪一個(gè) mixin。HOC 也有類似的問題。
  2. 命名空間沖突。由不同開發(fā)者開發(fā)的 mixin 無法保證不會(huì)正好用到一樣的屬性或是方法名。HOC 在注入的 props 中也存在類似問題。
  3. 性能。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中的Router基本配置命令實(shí)例詳解

    vue中的Router基本配置命令實(shí)例詳解

    Vue的Router是一個(gè)用于實(shí)現(xiàn)頁面跳轉(zhuǎn)和路由管理的插件,它可以幫助我們根據(jù)不同的URL請(qǐng)求加載不同的組件,以及實(shí)現(xiàn)前端路由功能,本文給大家介紹vue中的Router基本配置命令,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • Vue響應(yīng)式原理詳解

    Vue響應(yīng)式原理詳解

    本篇文章主要介紹了Vue響應(yīng)式原理詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程

    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-11
  • vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法

    vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue折疊面板組件的封裝

    Vue折疊面板組件的封裝

    這篇文章主要為大家詳細(xì)介紹了Vue折疊面板組件的封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue簡(jiǎn)易記事本開發(fā)詳解

    vue簡(jiǎn)易記事本開發(fā)詳解

    這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)易記事本的開發(fā)過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)

    vue+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-08
  • 使用vite發(fā)布app存在的所有問題解決方法

    使用vite發(fā)布app存在的所有問題解決方法

    最近項(xiàng)目中使用了vue3+vite開發(fā)一個(gè)App項(xiàng),下面這篇文章主要給大家介紹了關(guān)于使用vite發(fā)布app存在的所有問題的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作

    vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作

    這篇文章主要介紹了vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue中Axios的封裝與接口管理詳解

    Vue中Axios的封裝與接口管理詳解

    在vue項(xiàng)目中和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下
    2022-03-03

最新評(píng)論