#Swiper

npm i swiper -s

1, InitialSlide

设置轮播图默认显示的子类；参数该子类的index

:initialSlide="state.slide"

2, CenteredSlides

设定为true时，当前的active slide 会居中，而不是默认状态下的居左

:centeredSlides="true"

3, vue中使用swiper

import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Autoplay, A11y } from 'swiper'
import 'swiper/css'
components: {
    Swiper,
    SwiperSlide
},
<swiper
    :direction="'vertical'"
    :slides-per-view="7"
    :space-between="0"
    :loopedSlides="12"
    :slideToClickedSlide="true"
    :centeredSlides="true"
    :modules="modules"
    navigation
    :loop="true"
    :autoplay="{
        delay: 2000
    }"
    >
    <swiper-slide v-for="index in 12" :key="index"></swiper-slide>
</swiper>

:direction="'vertical'" // 滚动方向： vertical垂直滚动
:slides-per-view="7" // 可视数量
:space-between="0" // 分页距离
:loopedSlides="12" // 循环数量
:slideToClickedSlide="true" // 是否支持点击
:centeredSlides="true" // 当前播放居中
:modules="modules" // 模式，[Autoplay, A11y, Navigation]
navigation // 分页

#MetaMask

1, wallet_addEthereumChain 添加指定链

try {
    await ethereum.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: '0x61' }]
    })
} catch (switchError) {
    // 此错误代码表示该链尚未添加到 MetaMask。
    if (switchError.code === 4902) {
        try {
            await ethereum.request({
                method: 'wallet_addEthereumChain',
                params: [
                    {
                        chainId: '0x61', //52 in hex
                        chainName: 'BSC-Test',
                        rpcUrls: ['https://data-seed-prebsc-1-s1.binance.org:8545'] /* ... */
                    }
                ]
            })
        } catch (addError) {
            // 处理 "add" 错误
        }
    }
    // 处理其他 "switch" 错误
}

2, eth_requestAccounts 触发钱包插件

await window.ethereum.request({ method: 'eth_requestAccounts' })
myAddr = window.ethereum.selectedAddress

3, accountsChanged 监听切换地址

// 监听切换地址
window.ethereum.on('accountsChanged', accounts => {
    if (accounts) {
        window.location.reload()
    }
})

3, network 监听切换地址

// 监听切换地址
provider?.on('network', (newNetwork, oldNetwork) => {
    if (oldNetwork) {
        window.location.reload()
    }
})

4, chainId 链id

window.ethereum.chainId

#Ethers

npm i ethers -s

1, Contract 初始化合约

new ethers.Contract(address, abi, signer/provider)

2, getAddress 获取钱包地址

myAddr = await signer?.getAddress()

3, isAddress 检测钱包地址是否有效

eth.utils.isAddress(addr)
// 返回bool
// 注意：无法检测是否带有0x开头

4，formatEther/formatUnits 去除精度

formatEther(String(num)) 去除18位精度
formatUnits(String(num), 精度) 去除指定位数的精度

5, parseEther/parseUnits 增加精度

paseEther(String(num)) 增加18位精度
paserUnits(String(num), 精度) 增加指定精度

6, MaxUint256 生成零地址

eth.constants.MaxUint256()

#Tailwindcss

npm install -D tailwindcss

1, 新建tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
       extend: {},
    },
    plugins: [],
}

2, index.css

{
    @tailwind base;
    @tailwind components; 
    @tailwind utilities;
}

3, 添加 postcss.config.js

module.exports = {
    plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
    }
}

4, vite.config.js

defineConfig({
    optimizeDeps: {
        exclude: ['@tailwindcss/ui']
    },
})

5, 使用

class="2xl:w-[1500px] xl:w-[1220px] mx-auto flex flex-wrap items-center justify-center"
class="2xl:h-[800px] h-[500px] mx-auto mt-10 flex justify-between items-center flex-wrap"

.inp {
    @apply: w-full h-10 pl-2 pr-7 block rounded-lg;
}

#Dayjs

npm i dayjs

1, 使用

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
// dayjs.unix() // 初始化时间戳

let time = dayjs
    .utc(dayjs.unix(Number(tm)))
    .local()
    .format('YYYY/MM/DD HH:mm')
    
let utcTtime = dayjs
    .utc(dayjs.unix(Number(tm)))
    .local()
    .format('YYYY/MM/DD HH:mm')