Common Vue plug-ins

CNPM I [email protected] vue-awesome-swiper <swiper ref="mySwiper" :options="swiperOptions"> <! <div class="swiper-slide" :key="banner" v-for="banner in carouselArr"> <router-link to="/home"> <img :src="banner" /> </router-link> </div> <! <div class="swiper-pagination" slot="pagination"></div> <! -- If using navigation of the corresponding version --> <! <div class="swiper-button-next" @click="next"></div> <div class="swiper-button-next" slot="button-next" @click="prev"></div> </swiper> import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper' // import style (<= Swiper 5.x) import 'swiper/css/swiper.css' export default { components: { Swiper, SwiperSlide }, directives: { swiper: directive }, data() { return { carouselArr: [ "http://p1.music.126.net/DvpZh3dshTbun5nHhK_R6A==/109951165763452410.jpg?imageView&quality=89", "http://p1.music.126.net/mdyZSQSwdKb-qF7lGNHJrA==/109951165763459418.jpg?imageView&quality=89", "http://p1.music.126.net/orQYXdNejEIv8GBjbODcmw==/109951165763558692.jpg?imageView&quality=89", "http://p1.music.126.net/tA_M4v2nwEivLXnwXAnaNA==/109951165764637858.jpg?imageView&quality=89", "http://p1.music.126.net/T3UuzMVUazsBZnJuMHQarw==/109951165763668851.jpg?imageView&quality=89", ], swiperOptions: { pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", hideOnClick: true, }, loop: true, autoplay: { delay: 2000, stopOnLastSlide: False, disableOnInteraction: false,}, // effect: "fade", // keyboard: true True, touchRatio: 0.5, // Touch is slow},}; } animate. CSS 1, NPM install animate. CSS 2, import animate from "animate. Vue.use(animate); Import import "animate. CSS "; <h2 class="animate__animated animate__bounce"> </h2> It's ready to go! Dayjs 1, NPM install dayjs --save 2, import dayjs from "dayjs"; 3, console.log(dayjs(new Date()).format(" YYYY-MM-DD-hH-MM-ss ")); CNPM install vue-lazyload --save-dev 2, import VueLazyload from vue-lazyload "vue-lazyload"; Vue.use(VueLazyload, { loading: require("./assets/img/loadlazy/lazy.jpg") }); The img tag uses lazy loading: v-lazy instead of v-bind: SRC; V -lazy:background-image = "" ==>> <img v-lazy=" image address ":key=" image address "> :key="" must be added, otherwise the page is refreshed, all other content is refreshed, but only the image is not refreshed. The page will not be updated because the key may be the same!! -- -- -- -- -- -- -- -- fastclick solve 300 milliseconds latency introduced fastclick library: Install fastclick --save NPM install fastclick --save NPM install fastclick --save CNPM install fastclick --save and add import fastclick from 'fastclick' fastclick. attach(document.body); ———————————————— Copyright notice: This article is originally published BY CSDN blogger "Summer Xiang". It follows CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement. The original link: https://blog.csdn.net/qq_33769914/article/details/81001489 frame screen Rich text labels flexible adaptation 1. Install lib-flexible NPM I lib-flexible --save 2. 3, install cssREM to configure VScode, file -> Preferences -> Settings. Add the following configuration base font size to the user Settings. If the design is 750 standard, Set to 75 4, install px2rem - loader NPM install px2rem - loader - save - 5, vue3 configuration px2rem dev - loader module. Exports = {chainWebpack: (config) => { config.resolve.alias .set("@", resolve("src")) .set("assets", resolve("src/assets")) .set("components", resolve("src/components")) .set("views", resolve("src/views")) .set("network", resolve("src/network")) .set("config", resolve("src/config")) .set("common", resolve("src/common")); config.module .rule("scss") .test(/\.scss$/) .oneOf("vue") .use("px2rem-loader") .loader("px2rem-loader") .before("postcss-loader") // this makes it work. .options({ remUnit: 80, remPrecision: 24 }) .end(); }}; Function refreshRem(){var width = window.innerwidth; console.log(width); var rem = width / 24; // Make the project 1920 split into 24 parts exactly 80px docel.style. fontSize = rem + 'px'; flexible.rem = win.rem = rem; NPM I file-saver-s NPM I XLSX -s NPM I XLSX -sCopy the code