supermall

项目划分目录结构

组件命名：大驼峰单数形式

文件夹命名：小驼峰单数形式

src 文件夹下

├───assets
│ ├───css
│ └───img
├───common

└───const.js

├───components
│ ├───common
│ └───content
├───router
├───store
└───views
├───category
└───home

assets 对资源文件的管理
common 对一些公共的变量，样式进行抽取管理
components 公共组件存放地方
- common 其他项目可以用到的公共组件(和业务没关系)
- content 现有项目用到公共组件（和业务有关系）
router 路由的文件
store vuex存放数据
views 展示视图管理文件夹

vue.config.js

Javascript

// 可以起别名，最后和其他配置文件会合并
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'common': '@/common',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

.editorconfig用于代码风格规定 vue-cli3已经删除，但还是有必要添加上

Code

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

配置vue.config

vue.config.js 是来设置项目文件的别名

Javascript

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'common': '@/common',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

配置.editorconfig

配置项目中的代码规范

Code

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

对axios的封装

Javascript

import axios from 'axios'

export function request(config){
  const instance = axios.create({
    baseURL: 'http://106.54.54.237:8000/api/h8'
  })
  instance.interceptors.request.use(config=>{
    return config
  },err=>{
    console.log(err)
  })
  instance.interceptors.response.use(res=>{
    return res.data
  },err=>{
    console.log(err)
  })
  return instance(config)
}

使用，调用request函数，传入对象即可

swiper的使用

Code

<swiper 
    ref="mySwiper" 
    :options="swiperOptions">
      <swiper-slide 
      v-for="item in banners" 
      :key="item.title">
        <a :href="item.link">
          <img 
          style="width: 100%;" 
          :src="item.image"
          @load="imageLoad" alt="">
        </a>
      </swiper-slide>
      <div 
      class="swiper-pagination pagination-home" 
      slot="pagination"></div>
    </swiper>

Javascript

swiperOptions: {
          loop: true,
          autoplay: true,
          speed:1000,
          pagination: {
            el:'.swiper-pagination',    
          },
    },

一定要放入return中，否则不能正常使用

更改小圆点的背景

css

.pagination-home .swiper-pagination-bullet{
  background: #fff;
}

main.js中使用到全局

Javascript

import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

封装了一个防抖函数

放在common中utils（工具中）

Javascript

export function debounce(func,delay){
  let timer = null
  return function(...args){
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this,args)
    },delay)
  }
}

事件总线的使用

通常使用在是多个组件相互通信，当然不是父子，类似孙子如何和爷爷通信，这时就要使用bus，也可以使用vuex

挂载在一个新的vue实例中

Javascript

Vue.prototype.$bus = new Vue()

//组件（孙子）中发送一个事件

imageLoad(){

   this.$bus.$emit('itemImgLoad')

  }

//组件（爷爷接受）

this.$bus.$on('itemImgLoad',()=>{

   refresh()

  })

携带id到详情页

main.js

iid后面不带？表示必须传入id

Javascript

{
    path: '/detail/:iid',
    component: Detail
 }

传出

Javascript

itemClick(){
      // 路由跳转
      this.$router.push(`/detail/${this.goodsItem.iid}`)
    }

获取

Javascript

created(){
    this.iid = this.$route.params.iid
  },

导航栏点击切换颜色

html

<div 
      class="title-item"
      v-for="(item,index) in titles" 
      :key="index"
      :class="{active: index == currentIndex}"
      @click="titleClick(index)">{{item}}</div>
 </div>

Javascript

return {
      titles: ['商品','参数','评论','推荐'],
      currentIndex: 0,
    }

Javascript

titleClick(index){
      this.currentIndex = index
    }

css

.active{
  color: var(--color-high-text);    css变量写法
}

使用vue-lazyload

等图片需要出现在屏幕的时候，才加载

Javascript

import VueLazyLoad from 'vue-lazyload'

//  使用图片懒加载
Vue.use(VueLazyLoad,{
  loading: require('./assets/img/common/placeholder.png')
})

图片加载不出来的时候，使用背景图占位，这里使用require引入，使用import不行

组件中把：src换成 v-lazy

Code

<img v-lazy="showImage" alt="" @load="imageLoad">

移动端的300ms延时

使用插件fastClick

安装
导入
使用attac