vue3.0.1beta怎么搭建仿京东的电商H5项目

　　介绍

这篇文章主要讲解了vue3.0.1beta怎么搭建仿京东的电商H5项目,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

项目介绍

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

本地线下代码vue2.6在分支演示中,使用mockjs数据进行开发,效果图请点击,# 56599;这里

主分支是线上生产环境代码,因为部分后台接口已经挂了,# 56875;,不建议使用!

本项目还有很多不足之处,如果有想为此做贡献的伙伴,也欢迎给我们提出公关,或者问题;

本项目是免费开源的,如果有伙伴想要在次基础上进行二次开发,可以克隆或者叉整个仓库,如果能帮助到您,我将感到非常高兴,如果您觉得这个项目不错还请给个开始!,# 56911;

搭建步骤

首先,选择一个文件,将代码复制到本地:

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

查看所有分支:

gankaideMacBook-Pro: vue-jd-h6 gankai美元git分支 　　演示 　　demo_vue3 　　dev 　　功能 　　gh-pages 　　*主 　　遥控器/产地/头→来源/主 　　遥控器/产地/演示 　　遥控器/产地/demo_vue3 　　遥控器/产地/dev 　　遥控器/产地/功能 　　遥控器/产地/gh-pages 　　遥控器/产地/主

切换到分支demo_vue3开始进行开发!

项目的初始化

, # 56481;如果你在安装包的时候速度比较慢,那是因为NPM服务器在国外,这里给大家推荐一个可以随时切换NPM镜像的工具,# 56393;全国抵抗运动,有时候,我们开发的时候,为了加快安装包的安装速度,我们需要切换镜像源为国内的,但是,如果需要发布一些自己的组件到NPM的时候,又要来回切换回来,有了这个我们就方便多了!使用<代码> NPM美元安装- g的全国抵抗运动> 全国抵抗运动ls> 

 npm安装@vue/composition-api——保存

纱安装:

纱添加@vue/composition-api

CDN

& lt;脚本src=https://www.yisu.com/zixun/" https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js ">

通过全局变量窗口。vueCompositionApi来使用。

<强>使用

在使用任何@vue/composition-api提供的能力前,必须先通过Vue.use()进行安装:

在入口文件主要。js中:

从& # 39;进口Vue Vue # 39;; 　　从& # 39;进口VueCompositionApi @vue/composition-api& # 39;; 　　 　　Vue.use (VueCompositionApi);

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

, # 9888;及# 65039;目前vue官方为vue-cli提供了一个插件vue-cli-plugin-vue-next,你也可以直接在项目中直接添加最新的版本! 

 # Vue CLI在现有项目
　　vue添加vue-next

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

3.0 vue composition-api基本特性体验

<强>设置函数

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

vue2.xvue3setup(替代)设置(替代)beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmountederrorCapturedonErrorCaptured

vue3.0.1beta怎么搭建仿京东的电商H5项目