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

2020-06-16 06:46:30易采站长站整理

前言

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