Tags标签 网战地图
当前位置: 主页 > 网页设计 > JavaScript >

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

2020-05-30 16:38 [JavaScript] 来源于:网络整理
导读:这篇文章主要介绍了基于vue3.0.1beta搭建仿京东的电商H5项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了基于vue3.0.1beta搭建仿京东的电商H5项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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

GitHub地址请访问:

项目介绍

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

本地线下代码vue2.6在分支中,使用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镜像的工具,有时候,我们开发的时候,为了加快安装包的安装速度,我们需要切换镜像源为国内的,但是,如果需要发布一些自己的组件到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包版本管理工具,主要是管理包版本的,如果有兴趣的小伙伴,可以自己去了解一下,这里就不啰嗦了�!

安装

进入刚才clone下来的项目根目录,安装@vue/composition-api 体验 vue3 新特性。

npm安装:

npm install @vue/composition-api --save

yarn安装:

yarn add @vue/composition-api

CDN

<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

通过全局变量 window.vueCompositionApi 来使用。

使用

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

在入口文件main.js中:

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

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

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

# in an existing Vue CLI project
vue add vue-next

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

Vue 3.0 Composition-API基本特性体验

setup函数

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

vue2.x vue3
beforeCreate setup(替代)
created setup(替代)
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

(编辑:将源兵魂)

本文标签: vue
网友评论

栏目列表

推荐文章