将源兵魂
将源兵魂

基于vue3.0.1beta搭建仿京东的电商H5项目

前言

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

GitHub地址请访问：https://github.com/GitHubGanKai/vue3-jd-h5

项目介绍

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

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

master分支是线上生产环境代码，因为部分后台接口已经挂了�，不建议使用！

本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出PR，或者issue ；

本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！�

搭建步骤

首先,选择一个文件，将代码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 查看所有镜像：

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，主要是管理包版本的，如果有兴趣的小伙伴，可以自己去了解一下，这里就不啰嗦了�！

安装

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

npm安装：

npm install @vue/composition-api --save

yarn安装：

yarn add @vue/composition-api

CDN

通过全局变量 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 新特性提供了统一的入口,具体声明周期相关勾子，可以参考如下：

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

ps：感谢评论区小伙伴提出的疑问：如果你的项目是在vue2.x的基础上，再安装Composition API 来开发的，那么， setup 函数，会在 beforeCreate 之后created 之前执行！如果你是直接通过vue add vue-next安装最新的 vue3.0.x beta,那么setup会在beforeCreate和created之前执行!

新钩子

除了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
 };
 }
};

Ref自动展开（unwrap）

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 .value 属性，如果我们在setup函数中，想要访问的对象的值，可以通过.value来获取，但是如果是在