基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目！

时间 2020-05-04

标签基于 vue3.0.1 vue beta 搭建京东淘宝商商项目繁體版

原文原文链接

前言

就在前段时间，vue官方发布了3.0.0-beta.1 版本，趁着五一假期有时间，就把以前的一个电商商城的项目，用最新的Composition API拿来改造一下！javascript

👉GitHub地址请访问🔗：github.com/GitHubGanKa…html

项目介绍

vue-jd-h5是一个电商H5页面前端项目，基于Vue 3.0.0-beta.1 + Vant 实现，主要包括首页、分类页面、个人页面、购物车等。前端

📖本地线下代码vue2.6在分支demo中，使用mockjs数据进行开发，效果图请点击🔗这里vue

❌️master分支是线上生产环境代码，由于部分后台接口已经挂了😫，不建议使用！java

📌 本项目还有不少不足之处，若是有想为此作贡献的伙伴，也欢迎给咱们提出PR，或者issue ；node

🔑 本项目是免费开源的，若是有伙伴想要在次基础上进行二次开发，能够clone或者fork整个仓库，若是能帮助到您，我将感到很是高兴，若是您以为这个项目不错还请给个start！🙏react

搭建步骤

首先,选择一个文件，将代码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开始进行开发！

项目的初始化

💡若是你在安装包的时候速度比较慢，那是由于NPM服务器在国外，这里给你们推荐一个能够随时切换NPM镜像的工具👉NRM，有时候，咱们开发的时候，为了加快安装包的安装速度，咱们须要切换镜像源为国内的，可是，若是须要发布一些本身的组件到NPM的时候，又要来回切换回来，有了这个咱们就方便多了！使用$ npm install -g nrm全局安装，而后，可使用nrm ls 查看全部镜像：ios

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/
复制代码

若是须要使用淘宝镜像，执行： nrm use taobao 能够随时切换源，固然了还有一个npm包版本管理工具nvm，主要是管理包版本的，若是有兴趣的小伙伴，能够本身去了解一下，这里就不啰嗦了😊！git

安装

进入刚才clone下来的项目根目录，安装@vue/composition-api 体验 vue3 新特性。github

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() 进行安装:

在入口文件main.js中：

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

Vue.use(VueCompositionApi);
复制代码

安装插件后，您就可使用新的 Composition API 来开发组件了。

⚠️目前vue官方为vue-cli提供了一个插件vue-cli-plugin-vue-next，你也能够直接在项目中直接添加最新的版本！

# in an existing Vue CLI project
vue add vue-next
复制代码

若是有想从零开始体验新版本的小伙伴能够采用这种方法进行安装，因为咱们这个项目有依赖第三方库，若是全局安装，整个项目第三方UI库都没法运行！因此咱们仍是选择采用安装@vue/composition-api来进行体验，从而慢慢过渡到vue3最新版本

Vue 3.0 Composition-API基本特性体验

setup函数

setup() 函数是 vue3 中专门为组件提供的新属性，至关于2.x版本中的created函数,以前版本的组件逻辑选项，如今都统一放在这个函数中处理。它为咱们使用 vue3 的 Composition API 新特性提供了统一的入口,setup 函数会在相对于2.x来讲，会在 beforeCreate 以后、created 以前执行！具体能够参考以下：

vue2.x	vue3
~~beforeCreate~~	setup(替代)
~~created~~	setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

新钩子

除了2.x生命周期等效项以外，Composition API还提供了如下debug hooks：

onRenderTracked
onRenderTriggered

两个钩子都收到DebuggerEvent相似于onTrack和onTrigger观察者的选项：

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

依赖注入

provide和inject启用相似于2.x provide/inject选项的依赖项注入。二者都只能在setup()当前活动实例期间调用。

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接受可选的默认值做为第二个参数。若是未提供默认值，而且在Provide上下文中找不到该属性，则inject返回undefined。

注入响应式数据

为了保持提供的值和注入的值之间的响应式，可使用ref

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

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

由于setup函数接收2个形参，第一个是initProps，即父组建传送过来的值！，第二个形参是一个上下文对象

setupContext，这个对象的主要属性有：

attrs: Object    // 等同 vue 2.x中的 this.$attrs
emit: ƒ ()       // 等同 this.$emit()
isServer: false   // 是不是服务端渲染
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:{}	// 服务端渲染相关
复制代码

⚠️注意：在 setup() 函数中没法访问到 this的，无论这个this指的是全局的的vue对象(即：在main.js 中使用new生成的那个全局的vue实例对象)，仍是指单文件组建的对象。

可是，若是咱们想要访问当前组件的实例对象，那该怎么办呢？咱们能够引入getCurrentInstance这个api,返回值就是当前组建的实例！

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添加的这个地方须要结构出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自动展开（unwrap）

ref() 函数用来根据给定的值建立一个响应式的数据对象，ref() 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 .value 属性，若是咱们在setup函数中，想要访问的对象的值，能够经过.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>活动状态：{{active}}</p>
  <p>活动时间：{{timeData}}</p>
</template>
复制代码

⚠️注意：不要将Array放入ref中，数组索引属性没法进行自动展开，也不要使用 Array 直接存取 ref 对象:

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
复制代码

当咱们须要操做DOM的时候，好比咱们在项目中使用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函数中定义一个const mySwiper = ref(null);，以前在vue2.x中，咱们是经过this.$refs.mySwiper来获取DOM对象的，如今也可使用ref函数代替，返回的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对象！
    // 同时也可使用vue2.x中的refs.mySwiper ，他其实mySwiper.value 是同一个DOM对象！
    mySwiper.value.swiper.slideTo(3, 1000, false);
  });
  return {
    mySwiper
  }
}
复制代码

reactive

reactive() 函数接收一个普通对象，返回一个响应式的数据对象，等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来建立响应式的数据对象Observer，ref中咱们通常存放的是基本类型数据，若是是引用类型的咱们可使用reactive函数。

当reactive函数中，接收的类型是一个Array数组的时候，咱们能够在这个Array外面在用对象包裹一层，而后给对象添加一个属性好比：value（这个属性名你能够本身随便叫什么），他的值就是这个数组！

<script>
// 使用相关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数组中每一个对象都变成响应式的对象 
    const tabImgs = reactive({
      value: []
    });
    const ball = reactive({
      show: false,
      el: ""
    });
    return {
      active,
      timeData,
      tabImgs,
      ...toRefs(ball),
    };
  }
};
</script>
复制代码

那么在template模版中咱们想要访问这个数组的时候就是须要使用.value的形式来获取这个数组的值。

<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() 用来判断某个值是否为 ref() 建立出来的对象；当须要展开某个可能为 ref() 建立出来的值的时候，可使用isRef来判断！

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

setup(){
	const headerActive = ref(false);
  // 在setup函数中，若是是响应式的对象，在访问属性的时候，必定要加上.value来访问！
  const unwrapped = isRef(headerActive) ? headerActive.value : headerActive
  return {}
}
复制代码

toRefs

toRefs函数会将响应式对象转换为普通对象，其中返回的对象上的每一个属性都是指向原始对象中相应属性的ref，将一个对象上的全部属性转换成响应式的时候，将会很是有用！

import { reactive,toRefs } from '@vue/composition-api'
setup(){
  // ball 是一个 Observer
  const ball = reactive({
    show: false,
    el: ""
  });
  // ballToRefs 就是一个普通的Object，可是ballToRefs里面的全部属性都是响应式的（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>
复制代码

computed

computed函数的第一个参数，能够接收一个函数，或者是一个对象！若是是函数默认是getter函数，并为getter返回的值返回一个只读的ref对象。

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

const count = ref(1)
// computed接收一个函数做为入参
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误，plusOne是只读的！
复制代码

或者也能够是个函数，可使用具备get和set功能的对象来建立可写ref对象。

const count = ref(1)
// computed接收一个对象做为入参
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（以及相应的watch选项）彻底等效。

观察单一来源

观察者数据源能够是返回值的getter函数，也能够直接是ref：

// watching a getter函数
const state = reactive({ count: 0 })
watch(
  () => state.count, // 返回值的getter函数
  (count, prevCount,onCleanup) => {
    /* ... */
  }
)

// directly watching a ref
const count = ref(0)
watch(
  count, // 也能够直接是ref
  (count, prevCount,onCleanup) => {
  /* ... */
})
复制代码

watch多个来源

观察者还可使用数组同时监视多个源：

const me = reactive({ age: 24, name: 'gk' })
// reactive类型的
watch(
  [() => me.age, () => me.name], // 监听reactive多个数据源，能够传入一个数组类型，返回getter函数
  ([age, name], [oldAge, oldName]) => {
    console.log(age) // 新的 age 值
    console.log(name) // 新的 name 值
    console.log(oldAge) // 旧的 age 值
    console.log(oldName) // 新的 name 值
  },
  // options
  {
    lazy: true //默认 在 watch 被建立的时候执行回调函数中的代码，若是lazy为true ，怎建立的时候，不执行！
  }
)

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

// ref类型的
const work = ref('web')
const addres = ref('sz')
watch(
  [work,address],  // 监听多个ref数据源
  ([work, addres], [oldwork, oldaddres]) => {
   //......
  },
  {
    lazy: true 
  }
)

复制代码

watch和组件的生命周期绑定，当组件卸载后，watch也将自动中止。在其余状况下，它返回中止句柄，能够调用该句柄以显式中止观察程序：

// watch 返回一个函数句柄，咱们能够决定该watch的中止和开始！
const stopWatch = watch(
  [work,address],  // 监听多个ref数据源
  ([work, addres], [oldwork, oldaddres]) => {
   //......
  },
  {
    lazy: true 
  }
)

// 调用中止函数，清除对work和address的监视
stopWatch()
复制代码

在 watch 中清除无效的异步任务

<div class="search-con">
  <svg-icon class="search-icon" icon-class="search"></svg-icon>
  <input v-focus placeholder="搜索、关键词" v-model="searchText" />
</div>
复制代码

setup(props, { attrs, slots, parent, root, emit, refs }){
  const CancelToken = root.$http.CancelToken 
  const source = CancelToken.source() 
  // 定义响应式数据 searchText
  const searchText = ref('')

  // 向后台发送异步请求
  const getSearchResult = searchText => {
   root.$http.post("http://test.happymmall.com/search",{text:searchText}, {
     cancelToken: source.token
   }).then(res => {
    // .....
   });
  return source.cancel
}

// 定义 watch 监听
watch(
  searchText,
  (searchText, oldSearchText, onCleanup) => {
    // 发送axios请求，并获得取消axios请求的 cancel函数
    const cancel = getSearchResult(searchText)

    // 若 watch 监听被重复执行了，则会先清除上次未完成的异步请求
    onCleanup(cancel)
  },
  // watch 刚被建立的时候不执行
  { lazy: true }
)

  return {
    searchText
  }
}
复制代码

最后

趁着五一假期，有时间能够熟悉如下vue3的新特性，能够用这个项目练练手！，目前这个项目并无彻底升级成vue3.x，有兴趣的小伙伴能够本身fork过去，将其余页面也升级到vue3，当官方正式发布版本以后，能够轻松上手！

vue3新增 Composition API。新的 API 兼容 Vue2.x，只须要在项目中单独引入 @vue/composition-api 这个包就可以解决咱们目前 Vue2.x中存在的个别难题。好比：如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。基于 Vue 2.x 目前的 API 咱们有一些常见的逻辑复用模式，但都或多或少存在一些问题：

这些模式包括：

Mixins
高阶组件 (Higher-order Components, aka HOCs)
Renderless Components (基于 scoped slots / 做用域插槽封装逻辑的组件）

整体来讲，以上这些模式存在如下问题：

模版中的数据来源不清晰。举例来讲，当一个组件中使用了多个 mixin 的时候，光看模版会很难分清一个属性究竟是来自哪个 mixin。HOC 也有相似的问题。
命名空间冲突。由不一样开发者开发的 mixin 没法保证不会正好用到同样的属性或是方法名。HOC 在注入的 props 中也存在相似问题。
性能。HOC 和 Renderless Components 都须要额外的组件实例嵌套来封装逻辑，致使无谓的性能开销。

vue3中，新增 Composition API。并且新的API兼容 Vue2.x，只须要在项目中，单独引入 @vue/composition-api 这个包就能够，就可以解决咱们目前以上大部分问题。同时，若是我直接升级到 Vue3.x，我要作的事情会更多，只要当前项目中使用到的第三方ui库，都须要从新改造，以及升级后的诸多坑要填！刚开始的时候，我就是直接在当前脚手架的基础上 vue add vue-next 安装升级，可是只要是有依赖第三方生态库的地方，就有许多的坑。。。

Vue3.x 没有导出默认对象 export default，在第三方生态中，经常使用Vue.xxx()来进行依赖，如今这些语法须要重写，工做量可不小啊！

若是是新团队、小型的项目，能够尝试使用vue3进行尝试开发，慢慢过分，当 Vue3.x 正式发布后，并且周边生态跟上来了，就能够直接用vue3了！

在B站直播的时候，尤大也说了，目前vue3beta版本，最重要的是提高稳定性，和对第三方工具库的支持。

结束🔚

❤️ 看完三件事: 若是你以为这篇内容对你挺有启发，我想邀请你帮我个小忙：

点赞，让更多的人也能看到这篇内容，也方便本身随时找到这篇内容（收藏不点赞，都是耍流氓 -_-）关注咱们，不按期分好文章。也看看其它文章

🔥欢迎你把本身的学习体会写在留言区，与我和其余同窗一块儿讨论。若是你以为有所收获，也欢迎把文章分享给你的朋友。

本项目在手机端体验效果更佳，能够扫描如下二维码进行体验！👇