Vue-supermall

通过vuecli3搭建商城项目,并完善了项目功能效果,通过nginx代理服务器成功部署在服务器端有效果展示和源码实现

vuecli4配置问题解决

效果展示
源码地址

  • 项目概述:

    技术:vue.js

    涉及:脚手架vue-cli3,搭建商城项目

1 项目的创建和git的托管

  • 通过脚手架vue-cli3创建项目vue create supermallcase
    • 通过创建项目的时会自动生成git的初始化文件和READ.ME文件,在创建仓库时不需要初始化
  • 在github上创建仓库
image-20200519002647139 image-20200519002842465
  • 将本地的项目关联到仓库并push
1
2
git remote add origin git@github.com:SparkParis/supermallproject.git
git push -u origin master
image-20200519003116558

2 基本设置

2.1 目录结构

  • network:封装axios网络模块
  • components->common(可单独抽离的组件直接拿到另外的项目中使用)/content(views视图相关的文件):存放公共部分的组件
  • pages ->路由分层
  • common ->逻辑相关的公共部分(utils.js,const.js等)
  • assets->资源相关(img/css/js)
  • router->路由层
  • store->vuex

2.2 css初始化化和全局样式设置

  • normalize.css来设置全局样式统一

  • base.css设置我们自己的样式

  • 注意在css中可以定义变量,并导入

    • css的导入@import ''
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@import "./normalize.css";
/*:root -> 获取根元素html*/
:root {
  /* 在css中定义变量 */
  --color-text: #666;
  --color-high-text: #ff5777;
  --color-tint: #ff8198;
  --color-background: #fff;
  --font-size: 14px;
  --line-height: 1.5;
  /* --large-size: 50px */
}

 /* 使用变量 */
  /* font-size: var(--font-size); */

2.4 配置vue.config.js和.editorconfig

  • vue-cli3中隐藏了默认的配置文件,设置vue相关的配置,可以直接在根目录中创建vue.config.js(名称不能错)文件进行配置,会和默认的配置合并

  • .editorconfig代码开发的规范,cli3中去除了,可以直接拷贝

  • 在vue.config.js中设置别名

    • 别名使用
      • 在dom中使用掐面要加~
      • 其他直接使用:'assets/'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    // 基础的配置方式
    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views',
            }
        }
    }
}

2.5 tabbar封装(整体布局)

  • 封装Tabbar
  • 封装TabbarItem
  • 响应点击切换的设计
  • 封装完成后，使用时对Tabbar重新包装

注意路径

  • public中的文件会原封不动的放在打包后的dist文件
  • index.html中<%= BASE_URL表示jsp中获取当前文件

3 首页开发

3.1. navbar的封装和使用

  • 封装navbar包含三个插槽：left、center、right
  • 设置navbar相关的样式
  • 使用navbar实现首页的导航栏
网络请求的封装axios
  • 思想:将axios封装到request.js模块中,在每个views中面向request模块再次封装 (home.js,..),这样所有的views对应的页面网络请求都在对应的网络请求模块中,便于管理和修改
  • 页面加载完成之后马上发送请求,created(){},发送请求之后获取的数据需要保存在data的数据中,请求结束变量就会被回收
  • 注意在这里获取到的数据时经过响应拦截器过滤之后的数据

3.2. 请求首页数据

  • 封装请求首页更多数据
  • 将banner数据放在banners变量中
  • 将recommend数据放在recommends变量中

在进行数据请求之后将每个页面的组件都单独封装在自己 的view的组件中,在加载到自己的页面,这样保证每个view文件夹下的页面文件夹中存放的组件都在对应的目录下面

3.3. 根据Swiper封装HomeSwiper(轮播图)组件化封装

  • 使用Swiper和SwiperItem
  • 传入banners进行展示

有很多vue-ui的插件库,这里建议自己先写

todo:手写轮播图

3.4. 封装FeatureView

  • 传入recommends数据，进行展示

这里需要自己进行样式的设置,需要学习flex布局

  • 独立组件封装FeatureView
    • div>a>img

3.5. 封装RecommendView

  • 展示一张图片即可

navbar固定定位设置z-index显示优先级,

3.6. tabControl

封装tabControl

  • 基本结构的封装

  • 监听点击

  • 实现思路:

1
2
3
4
5
6
* 独立组件的封装
  * props -> titles
  * div>根据titles v-for遍历 div -> span{{title}}
  * css相关
  * 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom
    * currentIndex

  • 知识点

    • 当控制tab的item只有title不同时,建议使用插槽直接使用数据遍历的方式即可

    • 通过css属性可以设置吸附效果,position:sticky,同时还要设置滑到哪个位置进行吸附,top:100px

      • 原理:在使用吸附效果时,到达指定位置之前是原始状态,到达指定位置之后变为fixed状态

    • 设置tabControl,当点击某个选项设置当前选项的颜色:

      • 通过设置一个currentIndex来保存当前的index,通过动态绑定class,当index==currentIndex时添加类名

    tabControl的停留

  • 重新添加一个tabControl组件（需要设置定位，否则会被盖住）

  • 在updated钩子中获取tabControl的offsetTop

  • 判断是否滚动超过了offsetTop来决定是否显示新添加的tabControl

3.7. 请求和保存商品数据

  • 定义goodsList变量，用于存储请求到的商品数据(封装)
  • 根据type和page请求商品数据
  • 将商品数据保存起来

商品的数据结构

image-20200519185535409

  • 实现:

    • 发送数据
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    * 在home.js中封装getHomeGoods(type, page)
    * 在Home.vue中, 又在methods中getHomeGoods(type)
    * 调用getHomeGoods('pop')/getHomeGoods('new')/getHomeGoods('sell')
      * page: 动态的获取对应的page
    * 获取到数据: res
      * this.goods[type].list.push(...res.data.list)
      * this.goods[type].page += 1
    goods: {
    pop: page1:/list[30]
    new: page1/list[30]
    sell: page1/list[30]
    }

  • 操作流程

    • 封装axios请求
    • ceated中请求数据
    • 将数据保存在data中
    • 设置tabControl的组件并分别做展示,通过设置中间变量currentType来保存当前当前点击 的tabcontrol(在请求数据的时候是一次性将所有的数据都请求,需要那部分展示那部分)

  • 知识点:

    • 去除组件复用,就要添加key属性

    • 请求到的数据需要在data属性中声明变量保存起来

    • 在create中调用的方法可以直接封装在methods中,在created中通过this.方法名调用即可

    • 比较长的值可以直接放在计算属性中封装(在显示当前tabControl的时候传递当前tabcontrol的值)

      todo:

      case穿透

3.8. 商品数据的展示(封装GoodsList和GoodsListItem)

  • 展示商品列表，封装GoodsList
1
2
3
* props: goods -> list[30]
* v-for goods -> GoodsListItem[30]
* GoodListItem(组件) -> GoodsItem(数据)
  • 列表中每一个商品，封装GoodsListItem
1
2
* props: goodsItem 
* goodsItem 取出数据, 并且使用正确的div/span/img基本标签进行展示
  • 注意CSS属性的设置即可

todo:flex布局的学习

3.9. 滚动的封装Scroll(对滚动进行重构:Better-Scroll插件)

  • 学习BetterScroll滚动插件的使用
  • 安装better-scroll npm install better-scroll --save
  • 封装一个独立的组件，用于作为滚动组件：Scroll
  • 组件内代码的封装：
    • 1.创建BetterScroll对象，并且传入DOM和选项（probeType、click、pullUpLoad）(dom对象通过ref老获取,保证唯一性)
    • 2.监听scroll事件，该事件会返回一个position
    • 3.监听pullingUp事件，监听到该事件进行上拉加载更多
    • 4.封装刷新的方法：this.scroll.refresh()
    • 5.封装滚动的方法：this.scroll.scrollTo(x, y, time)
    • 6.封装完成刷新的方法：this.scroll.finishedPullUp

监听滚动和上拉加载更多的时候,都需要在scroll组件中选项中设置之后才能进行滚动事件的监听并发送该其他组件

1
2
3
4
5
6
7
this.scroll = new BestScroll(this.$refs.wrapper, {
      //在滚动内,按钮是否可用
      click: true,
      // 实时派发scroll事件,3表示实时,0,表示不触发
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad
    });

滚动的插件以前使用的是iscroll插件现在不维护了,采用better-scroll实现滚动,避免设备子代的滚动出现的卡顿现象,重构原生的滚动

注意在created函数中是不能拿到组件中的dom对象的,必须在组件挂载完成mounted之后才能拿到数据

  • 通过ref属性的设置可以拿到当前组件或者当前指定的元素,通过this.$ref.refname获取
  • vh是视口高度viewHeight
  • 设置滑动固定大小的方法有两种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 局部滚动需要设置高度 */
/* 方式1:绝对定位的方式(父相) */
.content {
  /* 注意这里的hidden会使sticky吸附失效 */
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
/* 方式2 */
/* .content {
  height: calc(100% - 93px);听过calc计算
  overflow: hidden;
  margin-top: 44px;
} */

better-scroll插件使用官方文档

  • 实现思路

    • 在index.html中使用Better-Scroll(测试)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      * const bscroll = new BScroll(el, {   })
      * 注意: wrapper -> content -> 很多内容
      * 1.监听滚动
        * probeType: 0/1/2(手指滚动)/3(只要是滚动)
        * bscroll .on('scroll', (position) => {})
      * 2.上拉加载
        * pullUpLoad: true
        * bscroll .on('pullingUp', () => {})
      * 3.click: false
        * button可以监听点击
        * div不可以

    • 在Vue项目中使用Better-Scroll

      1
      2
      3
      4
      5
      * 在Profile.vue中简单的演示
      * 对Better-Scroll进行封装: Scroll.vue
      * Home.vue和Scroll.vue之间进行通信
        * Home.vue将probeType设置为3
        * Scroll.vue需要通过$emit, 实时将事件发送到Home.vue

3.10. 上拉加载更多

  • 通过Scroll监听上拉加载更多。
  • 在Home中加载更多的数据。
  • 请求数据完成后，调动finishedPullUp

工作:封装bettter-scroll插件在项目中

3.11. 返回顶部BackTop实现与显示与隐藏

BackTop实现

  • 封装BackTop组件
  • 定义一个常量，用于决定在什么数值下显示BackTop组件
  • 监听滚动，决定BackTop的显示和隐藏(需要实时监听滚动事件获取滚动的位置,并通过指令v-show来实现)
  • 监听BackTop的点击，点击时，调用scrollTo返回顶部
1
2
scroll对象, scroll.scrollTo(x, y, time)
  * this.$refs.scroll.scrollTo(0, 0, 500)
  • 组件是不能直接监听点击的,必须要添加修饰符native,来监听原生组件的根元素
    • 点击之后获取scroll组件并调用子组件中的方法回到顶部,
    • 父子组件在传值的时候,dom对象中的动态绑定的值不能是驼峰式的,当子组件中的data中接收的是驼峰式的,父组件中的dom对象拆分为-连接
    • 子组件->父组件在通信发送自定义事件的时候建议不要将自定义事件命名为驼峰式,如果命名为驼峰式,在父组件中也要通过-连接

显示与隐藏

  • 思路
1
2
3
4
* isShowBackTop: false
* 监听滚动, 拿到滚动的位置:
  * -position.y > 1000  -> isShowBackTop: true
  * isShowBackTop = -position.y > 1000

3.12 解决首页中可滚动区域的问题

问题分析

  • 在使用图片进行加载的 ,Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定

  • scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度

  • 但是我们的首页中, 刚开始在计算scrollerHeight属性时, 是没有将图片计算在内的

  • 所以, 计算出来的告诉是错误的(1300+)

  • 后来图片加载进来之后有了新的高度, 但是scrollerHeight属性并没有进行更新.所以滚动出现了问题

问题解决

  • 监听每一张图片是否加载完成, 只要有一张图片加载完成了, 执行一次refresh()

  • 如何监听图片加载完成了?

  • 原生的js监听图片: img.onload = function() {}

  • Vue中监听: @load=’方法’

  • 调用scroll的refresh()

  • 如何将GoodsListItem.vue中的事件传入到Home.vue中

    • 因为涉及到非父子组件的通信, 所以这里我们选择了事件总线:用来集中处理事件的
    • bus ->总线
    • Vue.prototype.$bus = new Vue()
    • this.$bus.$emit('事件名称', 参数)
    • this.$bus.$on('事件名称', 回调函数(参数))

    这里定义全局事件总线,在Vue.prototype中定义

    https://www.jb51.net/article/132371.htm

问题1:refresh找不到的问题

  • 第一: 在Scroll.vue中, 调用this.scroll的方法之前, 判断this.scroll对象是否有值
  • 第二: 在mounted生命周期函数中使用 this.$refs.scroll而不是created中

问题2对于refresh非常频繁的问题, 进行防抖操作(优化性能)

  • 防抖debounce/节流throttle(课下研究一下)
  • 防抖函数起作用的过程:
    • 如果我们直接执行refresh, 那么refresh函数会被执行30次.
    • 可以将refresh函数传入到debounce函数中, 生成一个新的函数.
    • 之后在调用非常频繁的时候, 就使用新生成的函数.
    • 而新生成的函数, 并不会非常频繁的调用, 如果下一次执行来的非常快, 那么会将上一次取消掉
      1
      2
      3
      4
      5
      6
      7
      8
      9
      debounce(func, delay) {
             let timer = null
             return function (...args) {
               if (timer) clearTimeout(timer)
               timer = setTimeout(() => {
                 func.apply(this, args)
               }, delay)
             }
           },
  • 注意涉及到加载组件的操作,一般不要放在created函数中,放在mounted()函数中,加载完成之后才有组件
  • 防抖debounce和节流throttle
  • setTimeOut异步事件执行在事件循环机制中是最后执行的,所有即使没有设置时间也会有防抖的效果

3.13. tabControl的吸顶效果

获取到tabControl的offsetTop

  • 必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop

  • 但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.

  • 如何获取正确的值了?(// 重新计算tabControl的offsetTop

    // 组件不能直接计算offsetTop只有dom元素才行,$el可以获取组件的绑定的dom元素)

  • 监听HomeSwiper中img的加载完成.

  • 加载完成后, 发出事件, 在Home.vue中, 获取正确的值.

    补充:

  • 为了不让HomeSwiper多次发出事件,

  • 可以使用isLoad的变量进行状态的记录.

  • 注意: 这里不进行多次调用和debounce的区别

9.2. 监听滚动, 动态的改变tabControl的样式

  • 问题:动态的改变tabControl的样式时, 会出现两个问题:

    • 问题一: 下面的商品内容, 会突然上移

    • 问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了.

其他方案来解决停留问题.

  • 在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果.(home-nav下面)

    • 当用户滚动到一定位置时, PlaceHolderTabControl显示出来.

    • 当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.

只有设置了position,才能使用z-index ,所以在PlaceHolderTabControl中设置样式的position:relative;z-index=4,position设置为relative时,相对于自己的位置不变的

10 让Home保持原来的状态

让Home不要随意销毁掉

  • keep-alive
  • 只有keep-alive才会激发activated和deactiated钩子函数

让Home中的内容保持原来的位置

  • 离开时, 保存一个位置信息saveY.

  • 进来时, 将位置设置为原来保存的位置saveY信息即可.

  • 注意: 最好回来时, 进行一次refresh()

4 详情页面

4.1详情组件实现

  • 步骤:

    • 设置详情的组件
    • 封装请求数据,并获取请求数据,根据请求数据获取来进行页面的展示network->detail.js

  • 详情页面图片不刷新在keep-alive中需要将详情页面的组件name exclude,这样在每次加载详情页面就会重新提交请求

  • 当接收到的数据需要获取的信息非常多,且信息都不在把同一个部分时,考虑整合的思想,

    • 创建一个class对象,
    • 通过new 一个class对象,将数据保存起来
    • 在子组件中进行展示的时候直接将创建的class对戏哪个实例传递给子组件即可
    • 在进行渲染对象中的属性之前,v-if判断对象中的属性的长度是否为空Object.keys(goods).length获取对象中的属性名的个数

    详情页面底部tab-bar需要隐藏

    • 解决方案,设置position样式和优先级,让detail页面覆盖tabbar

    详情页面的局部滚动

    • 引入封装好的scroll组件,需要滚动的部分通过div包裹起来,并给div设置高度,才能进行滚动
    • 设置高度的时候要给父元素设置100vh的视口,然后才能计算滚动的距离
    • 一般在设置定位时,尽量不要用绝对定位和固定定位
    • 在详情页面中重构页面的滚动,出现加载的图片不能拖动或拖动迟缓的问题,注意监听加载的图片,在图片加载结束之后重新刷新页面进行scrollHeight的刷新

    详情页面的推荐部分使用的依然是googlist,这里需要使用图片懒加载的方式

    • 下载图片懒加载的插件
    • 安装插件
    • 使用插件
    • 使用方式见链接
      https://www.cnblogs.com/linjiangxian/p/11599501.html
    • goodlist是多个页面在使用,图片的数据属性会有所不同,这里需要对返回的属性值进行选择,在计算属性中返回响应页面的img的src
      1
      2
      main.js
      import LazyLoad from 'vue-lazyload'
      1
      2
      3
      4
      5
      6
      7
      8
      computed: {
        	showImage() {
        		return this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img
          }
        },

      使用
      <img @load="imgLoad" v-lazy="showImage" :key="showImage" alt="">

4.2 混入mixins知识点补充

  • mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。
  • Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
    1
    2
    3
    4
    5
    6
    7
    var mixin = {
      created: function () { console.log(1) }
    }
    var vm = new Vue({
      created: function () { console.log(2) },
      mixins: [mixin]
    })
  • 利用混入可以将多个组件中重复使用的部分通过自定义mixin进行封装,使用时直接导入即可,(home和detail都有监听图片加载完成之后在页面进行刷新的操作就可以直接将防抖操作连同刷新操作封装在mixin中,在哪个组件中使用就在哪个组件中导入混入mixins)

解决监听图片加载完成scroll界面进行刷新的方法:解决scroll滚动卡顿的问题

  • 父子组件之间直接通过emit进行发送通过methods中定义方法刷新
  • 非父子组件之间通过事件总线的方式(在mounted进行及时刷新)
    注意:图片加载完成刷新一般都有防抖操作全部在mixin中,获取到返回值之后及时执行刷新操作

4.3 标题和内容联动效果(详情页面)

4.3.1 给标题添加对应的点击事件

  • 点击标题回到对应的位置
  • 位置的跳转中需要使用使用周期函数$nextTick(),
  • 这里获取的值也是不是最新值,需要在图片加载完成之后在将对应位置的值保存在数组中
  • 在created中设置防抖操作,在图片加载完成之后执行获取当前位置的函数

知识点:$nextTick(function)

  • 将回调延迟到下次 DOM 更新循环之后执行。
  • 在修改数据之后立即使用它，然后等待 DOM 更新。
  • 它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上

4.3.2滚动scroll->到指定位置改变主题的显示

  • 思路
    • 在scroll中传入probeType为true,获得监听scroll的滚动事件权限,
    • 获取子组件中scroll滚动事件的当前位置,将当前位置和获取的主题数组themeTypes中的数值做比较,当介于0-第二个数值之间,设置当前的currentIndex=0,依次类推
    • 将获取的currentIndex传递给子组件显示对应的主题
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      contentScroll(position) {
          //  根据滚动的位置获取currentIndex的主题序号发送给NavBar
          position = -position;
          let length = this.themeTops.length;
          for (let i = 0; i < length; i++) {
            let iPos = this.themeTops[i];
            // 这里的条件要分开判断
            //<length-1和==length-1
            if (
              (i < length - 1 &&
                position >= iPos &&
                position < this.themeTops[i + 1]) ||
              (i === length - 1 && position >= this.themeTops[i])
            ) {
              if (this.currentIndex !== i) {
                this.currentIndex = i;
              }
              break;
            }
          }
          // 传值给子组件
          this.$refs.nav.currentIndex = this.currentIndex;
        },

image-20200522190552237

4.4 回到顶部(封装)

  • 通过mixin混入的方式,将backTop进行封装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 注意混入是一个对象
export const backToMixin = {
  data() {
    return {
      isShowTop: false,
    }
  },
  components: {
    BackTop
  },
  methods: {
    // 判断回到顶部按钮是否显示
    backTopPosition(position) {
      this.isShowTop = -position > TOP_POSITION;
    },
    topBackClick() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    }
  }
}

注意封装只能封装组件中的方法和属性不能封装方法内的部分是不会进行合并

  • 封装之后需要在监听滚动事件的方法中触发显示与隐藏的函数
1
this.backTopPosition(position);

4.5 底部工具栏点击加入购物车(通过状态管理Vuex实现)

界面实现

  • 注意底部工具栏是不添加在scroll中的,,
  • 界面中的整体架构是这样的

image-20200522205058465

  • 这里设置整体页面的视口100vh,在进行页面中的布局

  • 在使用position布局时,一般建议使用relative(不会移动自身位置,但是可以脱离文档流),建议少用position/fixed

4.6 添加购物车功能实现

image-20200522225907476

  • 实现思路

    • 为购物车按钮点击事件
    • 发送事件给父组件detail
    • vuex插件的安装和导入工作
    • 将购物车的数据存放在store的state中
    • 需要修改state中的数据时通过mutation和action来修改state中的值
    • 写好购物车页面的进行页面 路由的跳转
    • 在页面中分别对页面进行组件化部分的设计和显示

  • vuex使用过程中的注意

    • mutation中主要执行同步才做,执行的操作单一化,(便于vuex的调试工具跟踪执行状态)
    • 逻辑判断,异步操作等代码放在action属性中操作
    • 在action中对不同的逻辑判断在分发dispatch不同的事件给mutation来修改store中的值

  • vue中getter属性的辅助方法mapGetters可以将getter中的定义方法直接放在computed中使用而不用在重新在计算属性computed重新获取值

    • mapGetters直接从vuex中导入(是vuex属性)

  • 在添加滚轮注意是事项

    • 需要给scroll组件设置固定高度
    • 设置固定高度需要通过calc计算当前视口的大小减去navbar和tabbarcal(100vh - h1px - h2px),
    • 在scroll内部如果只有一个组件需要设置高度为100%

  • 购物车中的选中按钮的属性应该保存在goods的属性中

  • 监听checkedbutton按钮时可以直接添加在组件<CheckButton>中,通过修饰符native

  • 购物车底部组件的封装,样式的调整

    • 在样式调整过程中通过flex布局,

    image-20200523173600560

1
2
/* flex布局中设置垂直居中,此时的line-height不起作用 */
  align-items: center;

购物车全选点击事件

  • 显示状态
    • 判断是否有一个不选中,全选就是不选中
  • 点击全选按钮
    • 如果原来都是选中,点击 全部不选中
    • 如果原来都是不选中(某些不选中),全部选中
  • 通过mutations修改state中的属性,但是state中的属性值value是不用通过通过mutation进行修改的

添加购物车中的弹窗

  • 添加弹窗应该在每次action中添加成功在调用

  • 知识点:(promise/mapActions)

    • 在action中返回promise对象判断添加成功 与否,在执行相应的弹窗操作
    • action属性中方法通过辅助函数mapActions可以映射到methods中直接使用action中的方法
    • 这里和getters中的属性可以通过辅助函数mapGetters映射到computed中直接使用一样

  • 封装toast弹窗(通过插件的方式进行封装)

    • 封装方式:
      • 普通封装
      • 插件封装
    • 封装toast这里使用的是插件 的方式,
      • 封装toast的js文件并到处
      • 导入之后,通过Vue.use(toast)来安装插件
      • 在安装插件中会自定安装所需的标签等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//Toast.vue
<template>
  <div class="toast" v-show="isShow">{{message}}</div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      isShow: false,
      message: "我是弹窗"
    };
  },
  methods: {
    show(message, duration = 1000) {
      this.message = message;
      this.isShow = true;
      setTimeout(() => {
        this.isShow = false;
        this.message = "";
      }, duration);
    }
  }
};
</script>

<style>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 99;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//vue同一文件夹下的index.js
import Toast from './Toast'

const plugin = {}
// 安装插件中的install函数会默认传入Vue对象
plugin.install = function (Vue) {
  // 1.利用Toast对象创建组件构造器
  const constructor = Vue.extend(Toast);
  // 2.根据组件构造器创建组件对象
  const toast = new constructor();
  //3.将组件对象手动挂载到dom元素上
  toast.$mount(document.createElement('div'));
  // 4.将创建的dom元素添加到body中
  document.body.appendChild(toast.$el);
  // 5.将toast添加到Vue原型中
  Vue.prototype.$toast = toast;
}
export default plugin
1
2
3
4
5
6
7
8
9
10
11
main.js中安装插件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入懒加载插件
import LazyLoad from 'vue-lazyload'
// 注意这里导入的是toast中的index.js文件
import Toast from 'components/common/toast'
//安装插件,这里会自动执行toast对应的index.js文件中的install函数
Vue.use(Toast)
1
2
使用方式:
vm.$toast.show(message,duration)

5 补充

  • 插件fastclick可以解决移动端点击延迟300ms的问题
    • 下载npm install fastclick --save
    • main.js中导入
    • 调用attach()方法
  • polifill插件可以解决浏览器不支持promise的

6 图片懒加载插件vue–lazyload

  • 下载
  • 导入
  • 使用Vue.use()
  • 修改img中:src->v-lazy

具体使用进入github官方库查看

7 css中px2vw-css单位转化插件

学习链接: https://blog.csdn.net/qq_42354773/article/details/84629147

  • 二者都用于做移动端的适配

    • px->vw转化为视口
    • px->rem转化rem

  • 将css中的px单位转化为viewport

  • 使用vw实现移动端适配问题

  • 这里使用插件postcss-px-to-viewport(转化为视口)

  • 使用:

    • 安装插件(webpack打包过程中使用–save-dev)

      npm install postcss-px-to-viewport --save-dev(开发时依赖)

    • 在postcss.onfig.js中配置插件,详细的插件配置使用见github

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
          unitToConvert: 'px',
          viewportWidth: 375,
          unitPrecision: 5,
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],
          minPixelValue: 1,
          mediaQuery: false,
          exclude: [/tabbar/],
        }
      }
    }

image-20200525081633406

image-20200525091245243

8 项目的部署nginx

  • 项目部署在服务器上,部署的服务器有:

    • tomcate
    • nginx

    image-20200525093643709

  • 项目部署流程

    • 部署之前需要打包npm run build
    • 安装部署的服务器

8.1 nginx

image-20200525100802922
windows上部署
image-20200525101822850

  • 方式1:将vue中打包好的dist文件夹下的所有内容复制到html文件下即可进行访问,注意入口地址:http://localhost

    image-20200525103435742

  • 方式2:将dist文件夹直接放在nginx根目录下,修改nginx的入口文件即可

    • 在nginx.conf.js中还可以设置反向代理的配置
    • 在修改了配置之后需要重新启动nginx服务器,
    1
    2
    3
    4
    5
    6
    cd nginx的根目录
    nginx -s stop    或者    nginx -s quit
    stop表示立即停止nginx,不保存相关信息
    quit表示正常退出nginx,并保存相关信息
    重启(因为改变了配置,需要重启)
    nginx -s reload
    • 输入入口地址:localhost,不要加路由地址

image-20200525105515442

远程终端部署

  • 在终端部署好环境和系统

  • 安装nginx代理服务器

    image-20200525112657980

flutter和RN的跨平台框架对比https://www.jianshu.com/p/51c4f7f6e446

9 webpack+vue详细讲解

image-20200525101035103

10 Vue响应式的原理

  • image-20200525134517172

  • 响应式依赖的两个技术

    • Object.defineProperty():监听属性的改变

    image-20200525134141398

    • 发布者订阅者模式
      • 定义两个类,发布者中存放着订阅者,当发布者调用notify()时,订阅者就会执行自己的update函数来更新自己的数值,

  • 响应式原理的解析图:

image-20200525152732915

10.1 发布者订阅者模式

10.2 观察者模式

本文作者： SparkParis
本文链接： https://sparkparis.github.io/2020/05/19/Vue-project/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

电子科技大学在读研究生<br><br> 专业:<br> 软件工程专业<br><br> 研究方向:<br> 计算机视觉 医学影像 图像超分辨率<br><br> 研究成果:<br> 发表专利一篇<br><br> 语言:<br> JAVA python JavaScript<br><br> 希望从事工作:<br> 前端开发<br><br> 爱好:<br> 摄影,旅游(ready)<br><br> 愿一世安好<br> 款步自然的音乐<br> 轻怀草意和花香<br>