基于基于vue3.0.1beta搭建仿京东的电商搭建仿京东的电商H5项目项目
主要介绍了基于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,主要是管理包版本
的,如果有兴趣的小伙伴,可以自己去了解一下,这里就不啰嗦了!