在脚手架中比较实用的一些模块我和代码

首先,在看这篇文章前应该懂得脚手架的一些运行和各个模块的模块数据连接和跳转以及路由之间的数据传递和跳转.

1.传输数据比较好用的模块-----axios

首先下载模块     npm install axios

局部使用(在某一个组件中使用)

导入:  import axios from 'axios'

使用 axios.get() 或 axios.post()

全局使用(调用后,任意组件中都可使用)

在main.js中导入并设置vue原型

import axios from 'axios'

vue.prototype.$axios=axios

在任意组件中使用

this.$axios.get()

2.配置代理(代码)

基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/',    // 启动页地址
  outputDir: 'dist', // 打包的目录
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  //服务端设置的一些功能
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    proxy: {
      "/myDouyu": {
        target: "http://*****.cn",//需要调用的网址
        changeOrigin: true,
        pathRewrite: {
            "^/myDouyu": ""//需要在axios调用网址时,将前面的网址换成这个字段(可自行修改)
        }
      }
    }
  }
})

// 在vue.config.js中的devServer.proxy字段设置代理服务器
// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效

3.图片懒加载模块

(安装最新版的会报错  安装指定版本)
    cnpm install vue-lazyload@1.3.3 --save

在main.js入口文件中引入图片懒加载模块

    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
          loading: require("@/assets/加载的图片.png")
    })

组件中显示图片时,使用懒加载,将图片的:src改成v-lazy即可

如:<img :src="room.room_src" alt=""> 改成 <img v-lazy="room.room_src" alt="">

4.图片触底加载的代码(代码不保证通用,如果能帮助到最好,主要是模块有些麻烦,所以自己写了一个)

将判断触底的代码包装成一个函数

      load() {

        let viewHeight = window.innerHeight;//设置可视区域

        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//设置滑动高度

        let htmlHeight = document.documentElement.offsetHeight;//设置总高度

        if (viewHeight + scrollTop >= htmlHeight - 10) {

          // 设置10px的缓冲区,当网页滚动到距离底部还有10px的时候,就触底

          // ("scroll",this.load)

          // 防抖

          if (this.timer) clearTimeout(this.timer)

          this.timer = setTimeout(() => {

            // console.log("触底");

            this.ax()//这里的函数是调用时设置好页面的数据,将数据变成变量,每次调用使其可以更新(添加)新数据.

          }, 100);/这里设定0.1s,自行设置

        }

      }

最后在mounter周期函数里调用,在beforeDestroy周期函数里删除即可

    mounted() {

      window.addEventListener("scroll", this.load)

    },

    beforeDestroy() {

      window.removeEventListener("scroll", this.load)

    },