一个最低实践的商城项目,触及到的一些东西

事件总线

当需要跨过多个组件外加父子层级去传递参数时,如 子 -> 父 -> 父 -> 子 .. 。按照父子组件通信的方式未免有些太过笨拙,此时 事件总线很好解决了这个问题。一个地方发出的事件,在程序的范围内都能被监听到。

创建一个事件总线非常简单,只需要 将 Vue 这个类添加一个 Vue 实例作为属性就行:

// src/mian.js
import Vue from "vue"

// 自定义一个事件总线,名为 $bus
Vue.prototype.$bus = new Vue()

new Vue({
  render: (h) => h(App),
}).$mount("#app")

// 其他地方,如组件内。

// 向事件总线发出一个自定义事件
this.$bus.$emit("itemImgLoad", '发出了一个事件')

// 另一个组件,或者实例内任何地方挂载事件的回调。 (mounted 一般在这
this.$bus.$on("itemImgLoad", (res) => {
  console.log('itemimgload发生,参数', res)
})

混入

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。以组件数据优先。

通过 实例化对象参数的 mixins 完成混入,此属性接收一个数组,数组的每一项为对象

// common/mixin.js
export const itemListenerMixin = {
  data() {
    return {
      message: 'hello',
    }
  },
  mounted() {
    // 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
    console.log('被混入对象执行')
  },
}
import BackTop from "components/common/backtop/BackTop"

{   
  // 通过混入的方式引用以一个组件,页面混入后直接使用这个标签就行,虽然还是高耦合,但代码数量减少了。
  /* <back-top @click.native="backClick" v-show="isShowBackTop" /> */
}
export const backTopMixin = {
  components: {
    BackTop,
  },
  data() {
    return {
      isShowBackTop: false,
    }
  },
  methods: {
    backClick() {
      this.$refs.scroll.scrollTo(0, 0)
    },
  },
}

// 使用混入 
import {itemListenerMixin, backTopMixin} from "common/mixin"

export default {
  components: {},
  mixins: [itemListenerMixin, backTopMixin],
}

更多:官网

插件

一个小组件多个地方都要使用,而每次都需要导入-注册-使用-传值-控制 每一步都在不同的地方操作,仅是为了实现一个小功能( toast。这是需要怎么封装才是目前来说的最优解呢? 插件?

上代码。一个 toast 插件的实现。

创建一个 组件

// src\components\common\toast\Toast.vue
<template>
    <div :class="{ masking: masking }">
      <section v-show="isShow">
        {{ msg }}
      </section>
    </div>  
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      msg: "",
      masking: false,
    }
  },
  methods: {
    show(msg, duration = 1500, masking = true) {
      /* masking 蒙版,默认显示 */      
      this.isShow = true
      this.msg = msg
      this.masking = masking

      setTimeout(() => {
        this.isShow = false
        this.msg = ""
        this.masking = false
      }, duration)
    },
  },
}
</script>

<style lang="less" scoped>
section {
  z-index: 998;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(97, 97, 97, 0.8);
  color: rgb(212, 212, 212);
  font-size: 1.5rem;
  padding: 0.3rem 1rem;
  border-radius: 0.3rem;
}
.masking {
  z-index: 999;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(194, 194, 194, 0.37);
}
</style>

封装及注册

// src\components\common\toast\index.js
import Toast from './Toast'

class obj {
  install(Vue){
    console.log('obj', Vue);

    // 创建组件构造器
    const toastContrustor = Vue.extend(Toast)

    // 根据构造器,创建组件对象
    const toast = new toastContrustor()

    // 将组件对象,手动挂载到某个元素上
    toast.$mount(document.createElement('div'))

    // 将此元素放置进页面
    document.body.appendChild(toast.$el)

    Vue.prototype.$toast = toast
  }
}

export default new obj

// 注册 src\main.js


import toast from 'components/common/toast'
Vue.use(toast)

new Vue({ 
  render: (h) => h(App),
}).$mount("#app")

使用

<script>
export default {
   mounted() {
     this.$toast.show('页面加载中!')
   },
}
</script>

Polyfill

Polyfill 是一块代码(通常是 Web 上的 JavaScript ),用来为旧浏览器提供它没有原生支持的较新的功能。

比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能,或模拟 CSS 实现 rem 单位的支持,或 text-shadow,或其他任何你想要的功能。

fastclick

解决移动端点击 300 毫秒延迟的问题, 介绍 .原因是 双击判定影响了单击响应。个人感觉是要流畅一点。

使用

安装:

npm install fastclick   --save

使用

// src\main.js

import FastClick from 'fastclick'
FastClick.attach(document.body)

图片懒加载

vue-lazyload 一个常用的库?框架?插件?

1 安装

npm install vue-lazyload --save

2 导出进实例并配置

// src\main.js

import Vue from "vue"
import lazyLoad from 'vue-lazyload'

// 图片懒加载
Vue.use(lazyLoad, {
  // 配置未加载时的默认占位图片
  loadimg: require('./assets/img/defLoad.png')
})

// 实例化 vuem, 并挂载 ...

3 改变图片的加载方式

<img v-lazy="imgSrc" alt="" />

px 转 vw webpack loader

postcss-px-to-viewport,将项目中的 px 单位 转为对应 vw 的显示

1 安装

npm install postcss-px-to-viewport --save-dev

2 配置

// .postcssrc.js
module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要转换的单位
      viewportWidth: 750, // 视口宽度,等同于设计稿宽度
      unitPrecision: 5, // 精确到小数点后几位
      /**

       * 将会被转换的css属性列表,
       * 设置为 * 表示全部,如:['*']
       * 在属性的前面或后面设置*,如:['*position*'],*position* 表示所有包含 position 的属性,如 background-position-y
       * 设置为 !xx 表示不匹配xx的那些属性,如:['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
       * 还可以同时使用 ! 和 * ,如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
       * */
      propList: ["*"],
      viewportUnit: "vw", // 需要转换成为的单位
      fontViewportUnit: "vw", // 需要转换称为的字体单位

      /**

       * 需要忽略的选择器,即这些选择器对应的属性值(及其所有子元素?? 问题如果对应的选择器css属性为空则 其子元素会被转化)不做单位转换
       * 设置为字符串,转换器在做转换时会忽略那些选择器中包含该字符串的选择器,如:['body']会匹配到 .body-class,也就意味着.body-class对应的样式设置不会被转换
       * 设置为正则表达式,在做转换前会先校验选择器是否匹配该正则,如果匹配,则不进行转换,如[/^body$/]会匹配到 body 但是不会匹配到 .body
       */
      selectorBlackList: ['nav-bar', 'tab-bar'],
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: false, // 是否在媒体查询的css代码中也进行转换,默认false
      replace: true, // 是否转换后直接更换属性值

      /**

       * 按照正则忽略一些文件,如'node_modules', 并不会忽略其子文件
       * 设置为正则表达式,将会忽略匹配该正则的所有文件
       * 如果设置为数组,那么该数组内的元素都必须是正则表达式
       * 对于正则匹配有要求 如(/^Detail/) 是匹配不到的  Detail 的, 烦
       */  
      exclude: [/node_modules/, /Detail/, /DownBar\.vue/],
      landscape: false, // 是否自动加入 @media (orientation: landscape),其中的属性值是通过横屏宽度来转换的
      landscapeUnit: "vw", // 横屏单位
      landscapeWidth: 1334, // 横屏宽度,
    },
  },
}

个人感觉,如果是按照设计稿的尺寸做的话,应该会很合适,直接量设计稿的尺寸就行了。对于更改原有项目的更改话 应该比较麻烦。所以要使用项目开始时就使用!


相关推荐:

来自系列:Vue 笔记

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

评论([[comments.sum]])

发表

加载更多([[item.son.length-2]])...

发表

2020-11 By chuan.

Python-flask & bootstrap-flask

图片外链来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号