vue3.0.1beta怎么搭建仿京東的電商H5項目

git clone https://github.com/GitHubGanKai/vue-jd-h6.git

gankaideMacBook-Pro:vue-jd-h6 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

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/

npm install @vue/composition-api --save

yarn add @vue/composition-api

<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

# in an existing Vue CLI project
vue add vue-next

export default {
 onRenderTriggered(e) {
 debugger
 // inspect which dependency is causing the component to re-render
 }
}

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
 }
 }
}

// 在父組建中
const themeRef = ref('dark')
provide(ThemeSymbol, themeRef)

// 組件中
const theme = inject(ThemeSymbol, ref('light'))
watchEffect(() => {
 console.log(`theme set to: ${theme.value}`)
})

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 // 這個root是我們在main.js中，使用newVue()的時候，返回的全局唯一的實例對象，注意別和單文件組建中的this混淆了
slots: {} // 等同 vue2.x中的this.$slots
ssrContext:{} // 服務(wù)端渲染相關(guān)

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添加的這個地方需要結(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>

import { ref } from '@vue/composition-api'

setup() {
 const active = ref("");
 const timeData = ref(36000000);
 console.log('輸出===>',timeData.value)
 return {
 active,
 timeData
 }
}

<template>
 <p>活動狀態(tài)：{{active}}</p>
 <p>活動時間：{{timeData}}</p>
</template>

const state = reactive({
 list: [ref(0)],
});
// 不會自動展開, 須使用 `.value`
state.list[0].value === 0; // true

state.list.push(ref(1));
// 不會自動展開, 須使用 `.value`
state.list[1].value === 1; // true

 <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>

import { ref, onMounted } from "@vue/composition-api";
setup(props, { attrs, slots, parent, root, emit, refs }) {
 const mySwiper = ref(null);
 onMounted(() => {
 // 通過mySwiper.value 即可獲取到DOM對象！
 // 同時也可以使用vue2.x中的refs.mySwiper ，他其實mySwiper.value 是同一個DOM對象！
 mySwiper.value.swiper.slideTo(3, 1000, false);
 });
 return {
 mySwiper
 }
}

<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ù)組中每個對象都變成響應(yīng)式的對象 
 const tabImgs = reactive({
 value: []
 });
 const ball = reactive({
 show: false,
 el: ""
 });
 return {
 active,
 timeData,
 tabImgs,
 ...toRefs(ball),
 };
 }
};
</script>

<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>

import { isRef } from '@vue/composition-api'

setup(){
 const headerActive = ref(false);
 // 在setup函數(shù)中，如果是響應(yīng)式的對象，在訪問屬性的時候，一定要加上.value來訪問！
 const unwrapped = isRef(headerActive) ? headerActive.value : headerActive
 return {}
}

import { reactive,toRefs } from '@vue/composition-api'
setup(){
 // ball 是一個 Observer
 const ball = reactive({
 show: false,
 el: ""
 });
 // ballToRefs 就是一個普通的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對象展開，我們就可以直接在template模板中直接這樣使用這個對象上的所有屬性！
 }
}

<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>

import { computed } from '@vue/composition-api'

const count = ref(1)
// computed接收一個函數(shù)作為入?yún)?
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 錯誤，plusOne是只讀的！

const count = ref(1)
// computed接收一個對象作為入?yún)?
const plusOne = computed({
 get: () => count.value + 1,
 set: val => {
 count.value = val - 1
 }
})

plusOne.value = 1
console.log(count.value) // 0

// 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) => {
 /* ... */
})

const me = reactive({ age: 24, name: 'gk' })
// reactive類型的
watch(
 [() => me.age, () => me.name], // 監(jiān)聽reactive多個數(shù)據(jù)源，可以傳入一個數(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 //默認 在 watch 被創(chuàng)建的時候執(zhí)行回調(diào)函數(shù)中的代碼，如果lazy為true ，怎創(chuàng)建的時候，不執(zhí)行！
 }
)

setInterval(() => {
 me.age++
 me.name = 'oldMe'
}, 7000000)

// ref類型的
const work = ref('web')
const addres = ref('sz')
watch(
 [work,address], // 監(jiān)聽多個ref數(shù)據(jù)源
 ([work, addres], [oldwork, oldaddres]) => {
 //......
 },
 {
 lazy: true 
 }
)

// watch 返回一個函數(shù)句柄，我們可以決定該watch的停止和開始！
const stopWatch = watch(
 [work,address], // 監(jiān)聽多個ref數(shù)據(jù)源
 ([work, addres], [oldwork, oldaddres]) => {
 //......
 },
 {
 lazy: true 
 }
)

// 調(diào)用停止函數(shù)，清除對work和address的監(jiān)視
stopWatch()

<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('')

 // 向后臺發(fā)送異步請求
 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請求，并得到取消axios請求的 cancel函數(shù)
 const cancel = getSearchResult(searchText)

 // 若 watch 監(jiān)聽被重復(fù)執(zhí)行了，則會先清除上次未完成的異步請求
 onCleanup(cancel)
 },
 // watch 剛被創(chuàng)建的時候不執(zhí)行
 { lazy: true }
)

 return {
 searchText
 }
}