站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 基于vue3.0.1beta搭建仿京东的电商H5项目
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

基于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
            
最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -