weixin_44240581的博客

Vue3 + Scss 覆盖Element样式

import.meta.glob 自动读取路由

chainWebpack写法合集

Vue 异步组件的写法

Vue中使用WebWorker

Vant picker组件多列联动

vue-3d-model 使用总结

Vue 插值语法中用可选链

// App.vue...<style lang="less"> @font-face { font-family: "BebasNeue"; src: url("./font/BebasNeue.otf"); font-weight: normal; font-style: normal; }</style>

keyframe不要写在scoped里<style scope> // 这里的不生效 @keyframes spin { from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }</style><style> // 这里的生效 @keyframes spin { from{ transfo

<template> <div v-if="visible" ref="animationRef" :style="{...styles}" :class="['lottie-animate', ...className]" /></template><script> import lottie from 'lottie-web'; export default { props: {

Object.defineProperty 给每个属性添加get、set方法，监听数据的变化Class Observer { constructor(data) { this.observer(data); } observer(data) { if (data && typeof data === 'object') { for (let key in data) { this.defineReactive(data, key

【src/router/index.js】import Vue from 'vue';import VueRouter from 'vue-router';// 无论组件有没有用，都会被加载import SectionA from '../views/SectionA';import SectionB from '../views/SectionB';import SectionC from '../views/SectionC';// 组件按需加载const SectionA = (

图片懒加载【安装】npm i vue-lazyload -S【main.js】import Vue from 'vue';import App from './App.vue';import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload, { error: './assets/images/error.png', loading: './assets/images/loading.gif'})/* eslint-d

【src/router/index.js】import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ ... mode: 'history', // 刷新404 mode: 'hash' // 可以解决404，但是hash路由不利于SEO})export default router;...

预渲染服务端渲染 优 - 首屏加载快（HTML在后端完成，前端请求JS/CSS资源即可） - 利于SEO 缺 - 传输数据量大 预渲染: 针对路由生成HTML 原理: 打包时模拟浏览器提前访问路由对应的页面，生成html文件 优: 有多个界面，利于SEO 缺: 首屏加载慢 服务端渲染：新闻、电商等重SEO客户端渲染：强交互、不重SEO预渲染：只需改善少数页面的SEO【安装】vue add prerender-spa【vue.config.js】