木子、佳

vercelApi+mongoAtlas的使用

平时收集到的资料 cssjs资料和辅助函数 1、Neumorphism 地址： https://neumorphism.io/ 2、带有渐变的图标 地址： https://www.iconshock.com/svg-icons/ 3、Interactions 地址： https://easings.co/ 4、大型数据库 地址： https://bansal.io/pattern-css 5、自定义形状分隔线 地址： https://www.shapedivider.app/ 6、动画 地址： https://animista.net/ 7、Mask 地址： https://bennettfeely.com/ 8、动画按钮 地址： https://tympanus.net/Development/MagneticButtons/index.html 9、背景图案 地址： https://www.magicpattern.design/tools/css-backgrounds 10、SVG波浪 地址： https://svgwave.in/ 1、js工具函数 地址： 工具函数 ...

不编译的文件，可以用于演示效果

项目中比较全面的 vue-cli 配置 package.jsonvue.config.json{“name”: “my-project”,“version”: “0.1.0”,“private”: true,“scripts”: {“serve”: “vue-cli-service serve”,“dev”: “vue-cli-service serve”,“build”: “vue-cli-service build”,“lint”: “vue-cli-service lint”},“dependencies”: {“amfe-flexible”: “^2.2.1”,“axios”: “^0.19.2”,“chokidar”: “^2.1.8”,“core-js”: “^3.12.1”,“dayjs”: “^1.11.5”,“echarts”: “^5.4.0”,“moment”: “^2.29.1”,“vant”: “^2.12.19”,“vconsole”: “^3.5.2”,“vue”: “^2.6.12”,“vue-router”: “^3.5.1”,“vuex”: “^ ...

important引入的对象正常访问，但是解构报undefined

参考地址 https://www.runoob.com/css3/css-grid.html 布局使用 area 指定分配区域 12345678910111213141516.item1 { grid-area: header; }.item2 { grid-area: menu; }.item3 { grid-area: main; }.item4 { grid-area: right; }.item5 { grid-area: footer; }.grid-container { display: grid; grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; ...

文章轮播图侧边栏

记录日常练习的demo1. 仿大咖秀 效果htmlcssjs #wrap{ position: relative; /* height: 100%; width: 100%; */ /* 实际情况要进行容器样式调整 */ min-height: 300px; overflow: hidden; background: url(https://cdn.lovelee.cn/images/pic-bed/8b409cf84518ef14365616c7248c3431.gif) no-repeat center / contain; } .img{ height: 120px; width: 120px; background: rgba(255,255,255,.6); position: absolute; top: 30px; left: 46%; /*------*/ display: block; transition: transform .1s ...

参考heo 效果 step1: 在_config.yml中增加配置(记得冒号后面的空格哦) 写法1写法2123456789101112131415161718192021222324252627toggleList: [ { title: '博客相关', list: [ { text: '主页', link: 'https://www.addthis.com/', src: 'https://p9-passport.byteacctimg.com/img/mosaic-legacy/3791/5070639578~300x300.image' }, { text: '博客', link: 'https://www.addthis.com/', src: 'http ...

webpack使用小计初始化-安装12345678910npm init -y npm install webpack webpack-dev-server webpack-cli --save-dev三者缺一不可。开发到打包必备或者使用yarn (这里npm 安装包不太推荐用yarn 因为好多资源 yarn 安装会出错。避免不必要的麻烦就直接 npm )yarn add webpack webpack-cli webpack-dev-server --dev npx webpack 这里的npx Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。 npm install -g npx npx 将资源下载到一个临时目录，使用以后再删除 如果步骤不对，重新再来。中途重来会导致一系列问题 起步安装依赖1234567891011121314151617181920212223242526272829303132333435363738394041424344451. css生成单独文件 / 已有更新的方法替代npm ins ...

组件递归 组件递归时，出现下次标签不渲染。问题处理： name 为组件增加name属性 应用过程 @scroll 绑定后无效 给绑定元素增加 样式 overflow-x:hidden; | overflow:auto; @click 绑定事件阻止行为 stop 阻止冒泡 prevent 阻止默认事件 self 只作用于当前绑定元素 使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生。 例如：用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。 页面使用多个组件只展示一个 将组件使用双标签展示 如 改为 hook v-on v-bind=”$props” 展开对象 可以省去写很多 键值对 (用于父子组件传值) 将不会后期更改的数据 （或大数据）放弃监听 Object.freeze() 简易的store const state = Vue.observable({ count: 0 }) 异步组件 + loading 效果 使用vuex状态控制vm实例。disp ...

Vue-cli 使用小计 官网: https://cli.vuejs.org/zh/guide/ vue-cli 版本 @vue/cli 4.5.6 vue 版本 ~2.6.0 创建项目后less 或者 css 使用报错。版本不匹配。一般需要降级123456less-loader版本太高，可以卸载重装低版本卸载重装：npm uninstall less-loader安装低版本：npm install --save-dev less-loader@4.1.0在项目的文件package.json可以看到less-loader的版本 如果创建项目中途报错 简单暴力的方法解决,卸载所有,清除缓存,再来一次（有很大可能是版本变化导致-主要看错误说明是否涉及版本号） 1234567npm uninstall -g vuenpm uninstall -g vue-clinpm uninstall -g @vue/clinpm cache clean --forcenpm install -g @vue/cli 默认配置改动，配置了vue.config.js 将public 中默认in ...

github action 部署博客

todos