【vue】/vue-ele-project 【vue】

作者大大的地址是：https://github.com/JinwenXie/vue-ele-project
还是老办法，先运行项目看看效果

我不算是外卖爱好者，不过觉得那个添加商品到购物车的动画效果很好看很有趣
最近的框架好多，简直应接不暇，比如上篇的博客，我甚至以为作者大大自己封装一系列组件写项目，
搜索了一下才发现居然是van有赞小程序。
这个demo用到的是cube-ui也是一个框架，好像是滴滴的。
我一下子就惊吓到了。新的技术层出不穷，我会的和用到的都比较少，做观众欣赏别人的代码和产品也很有意思。
我们还是看代码吧

//main.js import Vue from 'vue' import App from './App.vue' // 引入cube-ui import './cube-ui' // 引入注册组件文件 import './register'import 'common/stylus/index.styl'Vue.config.productionTip = falsenew Vue({ render: h => h(App) }).$mount('#app')

主要说的意思就是页面是从app.vue进行渲染的，先看看register中引入了组件

//register.js // cube-ui的用法 import { createAPI } from 'cube-ui' import Vue from 'vue' import HeaderDetail from 'components/header-detail/header-detail' import ShopCartList from 'components/shop-cart-list/shop-cart-list' import ShopCartStikcy from 'components/shop-cart-sticky/shop-cart-sticky' import Food from 'components/food/food'createAPI(Vue, HeaderDetail) createAPI(Vue, ShopCartList) createAPI(Vue, ShopCartStikcy) createAPI(Vue, Food)

接下来看app.vue中做了什么
先看最上面的

文章图片

引入了组件

//v-header.vue @import "~common/stylus/mixin" @import "~common/stylus/variable".header position: relative overflow: hidden color: $color-white background: $color-background-ss .content-wrapper position: relative display: flex align-items: center padding: 24px 12px 18px 24px .avatar flex: 0 0 64px width: 64px margin-right: 16px img border-radius: 2px .content flex: 1 .title display: flex align-items: center margin-bottom: 8px .brand width: 30px height: 18px bg-image('brand') background-size: 30px 18px background-repeat: no-repeat .name margin-left: 6px font-size: $fontsize-large font-weight: bold .description margin-bottom: 8px line-height: 12px font-size: $fontsize-small .support display: flex align-items: center .support-ico margin-right: 4px .text line-height: 12px font-size: $fontsize-small-s.support-count position: absolute right: 12px bottom: 14px display: flex align-items: center padding: 0 8px height: 24px line-height: 24px text-align: center border-radius: 14px background: $color-background-sss .count font-size: $fontsize-small-s .icon-keyboard_arrow_right margin-left: 2px line-height: 24px font-size: $fontsize-small-s.bulletin-wrapper position: relative display: flex align-items: center height: 28px line-height: 28px padding: 0 8px background: $color-background-sss .bulletin-title flex: 0 0 22px width: 22px height: 12px margin-right: 4px bg-image('bulletin') background-size: 22px 12px background-repeat: no-repeat .bulletin-text flex: 1 white-space: nowrap overflow: hidden text-overflow: ellipsis font-size: $fontsize-small-s .icon-keyboard_arrow_right flex: 0 0 10px width: 10px font-size: $fontsize-small-s .background position: absolute top: 0 left: 0 width: 100% height: 100% z-index: -1 filter: blur(10px)

看看v-header里面的SupportIco

//不能理解里面写的是什么意思 @import "~common/stylus/mixin".support-ico display: inline-block background-repeat: no-repeat.icon-1 width: 12px height: 12px background-size: 12px 12px &.decrease bg-image('decrease_1') &.discount bg-image('discount_1') &.guarantee bg-image('guarantee_1') &.invoice bg-image('invoice_1') &.special bg-image('special_1').icon-2 width: 16px height: 16px background-size: 16px 16px &.decrease bg-image('decrease_2') &.discount bg-image('discount_2') &.guarantee bg-image('guarantee_2') &.invoice bg-image('invoice_2') &.special bg-image('special_2').icon-3 width: 12px height: 12px background-size: 12px 12px &.decrease bg-image('decrease_3') &.discount bg-image('discount_3') &.guarantee bg-image('guarantee_3') &.invoice bg-image('invoice_3') &.special bg-image('special_3').icon-4 width: 16px height: 16px background-size: 16px 16px &.decrease bg-image('decrease_4') &.discount bg-image('discount_4') &.guarantee bg-image('guarantee_4') &.invoice bg-image('invoice_4') &.special bg-image('special_4')

vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。
如果没有中间滑动需求，用 @touchmove.prevent 实现是一个很好的方法。
我们接下来看seller组件
他的页面是

文章图片

呃呃，其实想不明白，为啥要在header中传入sell组件

//seller组件 @import "~common/stylus/variable" @import "~common/stylus/mixin".seller height: 100% text-align: left .overview position: relative padding: 18px .title margin-bottom: 8px line-height: 14px font-size: $fontsize-medium color: $color-dark-grey .desc display: flex align-items: center padding-bottom: 18px .star margin-right: 8px .text margin-right: 12px line-height: 18px font-size: $fontsize-small-s color: $color-grey .remark display: flex padding-top: 18px .block flex: 1 text-align: center border-right: 1px solid $color-col-line &:last-child border: none h2 margin-bottom: 4px line-height: 10px font-size: $fontsize-small-s color: $color-light-grey .content line-height: 24px font-size: $fontsize-small-s color: $color-dark-grey .stress font-size: $fontsize-large-xxx .favorite position: absolute width: 50px right: 11px top: 18px text-align: center .icon-favorite display: block margin-bottom: 4px line-height: 24px font-size: $fontsize-large-xxx color: $color-light-grey-s &.active color: $color-red .text line-height: 10px font-size: $fontsize-small-s color: $color-grey .bulletin padding: 18px 18px 0 18px white-space: normal .title margin-bottom: 8px line-height: 14px color: $color-dark-grey font-size: $fontsize-medium .content-wrapper padding: 0 12px 16px 12px .content line-height: 24px font-size: $fontsize-small color: $color-red .supports .support-item display: flex align-items: center padding: 16px 12px &:last-child border-none() .support-ico margin-right: 6px .text line-height: 16px font-size: $fontsize-small color: $color-dark-grey .pics padding: 18px .title margin-bottom: 12px line-height: 14px color: $color-dark-grey font-size: $fontsize-medium .pic-wrapper display: flex align-items: center .pic-list .pic-item display: inline-block margin-right: 6px width: 120px height: 90px &:last-child margin: 0 .info padding: 18px 18px 0 18px color: $color-dark-grey .title padding-bottom: 12px line-height: 14px font-size: $fontsize-medium .info-item padding: 16px 12px line-height: 16px font-size: $fontsize-small &:last-child border-none()

看一下common/js/storage

//src\common\js\storage.js import storage from 'good-storage' // vue搜索历史本地存储-good-storageconst SELLER_KEY = '__seller__'export function saveToLocal(id, key, val) { const seller = storage.get(SELLER_KEY, {}) if (!seller[id]) { seller[id] = {} } seller[id][key] = val storage.set(SELLER_KEY, seller) }export function loadFromLocal(id, key, def) { const seller = storage.get(SELLER_KEY, {}) if (!seller[id]) { return def } return seller[id][key] || def }

//src\components\star\star.vue @import "~common/stylus/mixin.styl".star display: flex align-items: center justify-content: center .star-item background-repeat: no-repeat &.star-48 .star-item width: 20px height: 20px margin-right: 22px background-size: 20px 20px &:last-child margin-right: 0 &.on bg-image('star48_on') &.half bg-image('star48_half') &.off bg-image('star48_off') &.star-36 .star-item width: 15px height: 15px margin-right: 6px background-size: 15px 15px &:last-child margin-right: 0 &.on bg-image('star36_on') &.half bg-image('star36_half') &.off bg-image('star36_off') &.star-24 .star-item width: 10px height: 10px margin-right: 3px background-size: 10px 10px &:last-child margin-right: 0 &.on bg-image('star24_on') &.half bg-image('star24_half') &.off bg-image('star24_off')

上面内容没有看懂

//split.vue @import "~common/stylus/variable" .split width: 100% height: 16px border-top: 1px solid $color-row-line border-bottom: 1px solid $color-row-line background: $color-background-ssss

//src\components\support-ico\support-ico.vue @import "~common/stylus/mixin".support-ico display: inline-block background-repeat: no-repeat.icon-1 width: 12px height: 12px background-size: 12px 12px &.decrease bg-image('decrease_1') &.discount bg-image('discount_1') &.guarantee bg-image('guarantee_1') &.invoice bg-image('invoice_1') &.special bg-image('special_1').icon-2 width: 16px height: 16px background-size: 16px 16px &.decrease bg-image('decrease_2') &.discount bg-image('discount_2') &.guarantee bg-image('guarantee_2') &.invoice bg-image('invoice_2') &.special bg-image('special_2').icon-3 width: 12px height: 12px background-size: 12px 12px &.decrease bg-image('decrease_3') &.discount bg-image('discount_3') &.guarantee bg-image('guarantee_3') &.invoice bg-image('invoice_3') &.special bg-image('special_3').icon-4 width: 16px height: 16px background-size: 16px 16px &.decrease bg-image('decrease_4') &.discount bg-image('discount_4') &.guarantee bg-image('guarantee_4') &.invoice bg-image('invoice_4') &.special bg-image('special_4')

上面内容我没有看懂
接下来看tab里面的内容

文章图片

在App.vue中引入了goods组件

//goods.vue @import "~common/stylus/mixin" @import "~common/stylus/variable" .goods position: relative text-align: left height: 100% .scroll-nav-wrapper position: absolute width: 100% top: 0 left: 0 bottom: 48px >>> .cube-scroll-nav-bar width: 80px white-space: normal overflow: hidden >>> .cube-scroll-nav-bar-item padding: 0 10px display: flex align-items: center height: 56px line-height: 14px font-size: $fontsize-small background: $color-background-ssss .text flex: 1 position: relative .num position: absolute right: -8px top: -10px .support-ico display: inline-block vertical-align: top margin-right: 4px >>> .cube-scroll-nav-bar-item_active background: $color-white color: $color-dark-grey >>> .cube-scroll-nav-panel-title padding-left: 14px height: 26px line-height: 26px border-left: 2px solid $color-col-line font-size: $fontsize-small color: $color-grey background: $color-background-ssss .food-item display: flex margin: 18px padding-bottom: 18px position: relative &:last-child border-none() margin-bottom: 0 .icon flex: 0 0 57px margin-right: 10px img height: auto .content flex: 1 .name margin: 2px 0 8px 0 height: 14px line-height: 14px font-size: $fontsize-medium color: $color-dark-grey .desc, .extra line-height: 10px font-size: $fontsize-small-s color: $color-light-grey .desc line-height: 12px margin-bottom: 8px .extra .count margin-right: 12px .price font-weight: 700 line-height: 24px .now margin-right: 8px font-size: $fontsize-medium color: $color-red .old text-decoration: line-through font-size: $fontsize-small-s color: $color-light-grey .cart-control-wrapper position: absolute right: 0 bottom: 12px .shop-cart-wrapper position: absolute left: 0 bottom: 0 z-index: 50 width: 100% height: 48px

//src\components\cart-control\cart-control.vue @import "~common/stylus/variable".cartcontrol display: flex align-items: center .cart-decrease display: inline-block padding: 6px opacity: 1 .inner display: inline-block line-height: 24px font-size: $fontsize-large-xxx color: $color-blue transition: all 0.4s linear transform: rotate(0) &.move-enter-active, &.move-leave-active transition: all 0.4s linear &.move-enter, &.move-leave-active opacity: 0 transform: translate3d(24px, 0, 0) .inner transform: rotate(180deg) .cart-count width: 12px line-height: 24px text-align: center font-size: $fontsize-small-s color: $color-grey .cart-add display: inline-block padding: 6px line-height: 24px font-size: $fontsize-large-xxx color: $color-blue

//src\components\shop-cart\shop-cart.vue @import "~common/stylus/mixin" @import "~common/stylus/variable".shopcart height: 100% .content display: flex background: $color-background font-size: 0 color: $color-light-grey .content-left flex: 1 .logo-wrapper display: inline-block vertical-align: top position: relative top: -10px margin: 0 12px padding: 6px width: 56px height: 56px box-sizing: border-box border-radius: 50% background: $color-background .logo width: 100% height: 100% border-radius: 50% text-align: center background: $color-dark-grey &.highlight background: $color-blue .icon-shopping_cart line-height: 44px font-size: $fontsize-large-xxx color: $color-light-grey &.highlight color: $color-white .num position: absolute top: 0 right: 0 .price display: inline-block vertical-align: top margin-top: 12px line-height: 24px padding-right: 12px box-sizing: border-box border-right: 1px solid rgba(255, 255, 255, 0.1) font-weight: 700 font-size: $fontsize-large &.highlight color: $color-white .desc display: inline-block vertical-align: top margin: 12px 0 0 12px line-height: 24px font-size: $fontsize-small-s .content-right flex: 0 0 105px width: 105px .pay height: 48px line-height: 48px text-align: center font-weight: 700 font-size: $fontsize-small &.not-enough background: $color-dark-grey &.enough background: $color-green color: $color-white .ball-container .ball position: fixed left: 32px bottom: 22px z-index: 200 transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41) .inner width: 16px height: 16px border-radius: 50% background: $color-blue transition: all 0.4s linear

//src\components\bubble\bubble.vue @import "~common/stylus/variable".bubble display: inline-block padding: 0 5px height: 16px line-height: 16px text-align: center border-radius: 16px font-family: Helvetica font-weight: 700 font-size: $fontsize-small-s color: $color-white background: linear-gradient(to right, $color-orange, $color-red)

文章图片

再看rating组件

@import "~common/stylus/variable" @import "~common/stylus/mixin".ratings position: relative text-align: left white-space: normal height: 100% .overview display: flex padding: 18px 0 .overview-left flex: 0 0 137px padding: 6px 0 width: 137px border-right: 1px solid $color-col-line text-align: center @media only screen and (max-width: 320px) flex: 0 0 120px width: 120px .score margin-bottom: 6px line-height: 28px font-size: $fontsize-large-xxx color: $color-orange .title margin-bottom: 8px line-height: 12px font-size: $fontsize-small color: $color-dark-grey .rank line-height: 10px font-size: $fontsize-small-s color: $color-light-grey .overview-right flex: 1 padding: 6px 0 6px 24px @media only screen and (max-width: 320px) padding-left: 6px .score-wrapper display: flex align-items: center margin-bottom: 8px .title line-height: 18px font-size: $fontsize-small color: $color-dark-grey .star margin: 0 12px .score line-height: 18px font-size: $fontsize-small color: $color-orange .delivery-wrapper display: flex align-items: center .title line-height: 18px font-size: $fontsize-small color: $color-dark-grey .delivery margin-left: 12px font-size: $fontsize-small color: $color-light-grey .rating-wrapper padding: 0 18px .rating-item display: flex padding: 18px 0 &:last-child border-none() .avatar flex: 0 0 28px width: 28px margin-right: 12px img height: auto border-radius: 50% .content position: relative flex: 1 .name margin-bottom: 4px line-height: 12px font-size: $fontsize-small-s color: $color-dark-grey .star-wrapper margin-bottom: 6px display: flex align-items: center .star margin-right: 6px .delivery font-size: $fontsize-small-s color: $color-light-grey .text margin-bottom: 8px line-height: 18px color: $color-dark-grey font-size: $fontsize-small .recommend display: flex align-items: center flex-wrap: wrap line-height: 16px .icon-thumb_up, .item margin: 0 8px 4px 0 font-size: $fontsize-small-s .icon-thumb_up color: $color-blue .item padding: 0 6px border: 1px solid $color-row-line border-radius: 1px color: $color-light-grey background: $color-white .time position: absolute top: 0 right: 0 line-height: 12px font-size: $fontsize-small color: $color-light-grey

//src\components\tab\tab.vue @import "~common/stylus/variable".tab display: flex flex-direction: column height: 100% >>> .cube-tab padding: 10px 0 .slide-wrapper flex: 1 overflow: hidden

上面的代码：我并没有看懂，应该花一段时间专门学习，还有我发现有些基础知识点我不会。
【【vue】/vue-ele-project】转载于:https://www.cnblogs.com/smart-girl/p/11138943.html