用vue3.0.1如何搭建仿京东的电商H5项目呢？本文实战教你

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

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

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

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

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

🔑 本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！
🙏除了本项目，我结合多年开发经验整理出2020最新企业级实战视频教程 包括 Vue3.0/Js/ES6/TS/React/node等，想学的可进扣扣裙 519293536 免费获取，小白勿进哦！

1. 首先,选择一个文件，将代码clone到本地（需要先fork代码到你自己的仓库，别用我的这个链接）：

2. 查看所有分支：

3. 切换到分支demo_vue3开始进行开发！

💡如果你在安装包的时候速度比较慢，那是因为NPM服务器在国外，这里给大家推荐一个可以随时切换NPM镜像的工具👉NRM，我们开发的时候，为了加快依赖包的安装速度，我们需要切换镜像源为国内的，但是，如果需要发布一些自己的组件到NPM的时候，又要来回切换回来，有了这个我们就方便多了！使用全局安装，然后，可以使用 查看所有镜像：

如果需要使用淘宝镜像，执行：  可以随时切换镜像源，当然了还有一个npm包版本管理工具nvm，主要是管理包版本的，如果有兴趣的小伙伴，可以自己去了解一下，这里就不啰嗦了😊！

进入刚才clone下来的项目根目录，安装 体验 vue3 新特性。

安装：

安装：

CDN

通过全局变量  来使用。

在使用任何  提供的能力前，必须先通过  进行安装:

在入口文件中：

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

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

如果有想从零开始体验新版本的小伙伴可以采用这种方法进行安装，由于我们这个项目有依赖第三方库，如果全局安装，整个项目第三方UI库都无法运行！所以我们还是选择采用安装来进行体验，从而慢慢过渡到vue3最新版本。

 函数是  中专门为组件提供的新属性，相当于版本中的函数,之前版本的组件逻辑选项，现在都统一放在这个函数中处理。它为我们使用 的  新特性提供了统一的入口,具体声明周期相关勾子，可以参考如下：

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

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

两个钩子都收到类似于和观察者的选项：

和启用类似于2.x 选项的依赖项注入。两者都只能在当前活动实例期间调用。

接受可选的默认值作为第二个参数。如果未提供默认值，并且在Provide上下文中找不到该属性，则返回。

注入响应式数据

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

1. 因为函数接收2个形参，第一个是，即父组建传送过来的值！，第二个形参是一个上下文对象

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

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

但是，如果我们想要访问当前组件的实例对象，那该怎么办呢？我们可以引入这个api,返回值就是当前组建的实例！

 函数用来根据给定的值创建一个响应式的数据对象， 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个  属性，如果我们在函数中，想要访问的对象的值，可以通过来获取，但是如果是在模版中，直接访问即可，不需要！

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

当我们需要操作DOM的时候，比如我们在项目中使用需要获取DOM,那么我们还可以这样👇！

然后在函数中定义一个，之前在vue2.x中，我们是通过来获取DOM对象的，现在也可以使用函数代替，返回的要和中绑定的相同！

 函数接收一个普通对象，返回一个响应式的数据对象，等价于  中的  函数， 中提供了  函数，用来创建响应式的数据对象，中我们一般存放的是基本类型数据，如果是引用类型的我们可以使用函数。

当函数中，接收的类型是一个数组的时候，我们可以在这个外面在用对象包裹一层，然后给对象添加一个属性比如：（这个属性名你可以自己随便叫什么），他的值就是这个数组！

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

 用来判断某个值是否为  创建出来的对象；当需要展开某个可能为  创建出来的值的时候，可以使用来判断！

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

点击添加按钮，小球飞入购物车动画：

函数的第一个参数，可以接收一个函数，或者是一个对象！如果是函数默认是函数，并为返回的值返回一个只读的对象。

或者也可以是个对象，可以使用具有和功能的对象来创建可写对象。

该API与2.x （以及相应的选项）完全等效。

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

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

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

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

这些模式包括：

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

总体来说，以上这些模式存在以下问题：

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

vue3中，新增 。而且新的兼容 ，只需要在项目中，单独引入  这个包就可以，就能够解决我们目前 以上大部分问题。同时，如果我直接升级到 ，我要做的事情会更多，只要当前项目中使用到的第三方ui库，都需要重新改造，以及升级后的诸多坑要填！刚开始的时候，我就是直接在当前脚手架的基础上  安装升级，但是只要是有依赖第三方生态库的地方，就有许多的坑。。。

 没有导出默认对象 ，在第三方生态中，常用来进行依赖，现在这些语法需要重写，工作量可不小啊！

如果是新团队、小型的项目，可以尝试使用vue3进行尝试开发，慢慢过度，当  正式 发布 后，而且周边生态跟上来了，就可以直接用vue3了！

在bilibili直播的时候，Evan You也说了，目前vue3 beta版本，最重要的是提升稳定性，和对第三方工具库的支持，如果你是第三方库的作者，可以现在开始，熟悉熟悉源码了，我们开发者可以先读懂所有API的使用。

⚠️本项目当前只修改了和文件，但是，其他的修改也都一样，如果有兴趣的小伙伴可以自己fork过去，将其他页面也用Composition API再写一遍，自己练练手！熟悉一下新API，同时我也会将其他的页面慢慢完善起来！大家一起⛽️加油！当官方正式发布版本之后，我们可以快速上手！另外我结合多年开发经验整理出2020最新企业级实战视频教程 包括 Vue3.0/Js/ES6/TS/React/node等，想学的可进扣扣裙 519293536 免费获取，小白勿进哦！