记一次vercelApi+mongoAtlas的使用
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工具函数 地址: 工具函数
...
内嵌编译html
不编译的文件,可以用于演示效果
vue-cli 项目配置
项目中比较全面的 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引入的对象不能解构
important引入的对象正常访问,但是解构报undefined
css-grid常用整理
参考地址 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'; ...
给butterfly侧边栏添加轮播图
文章轮播图侧边栏
平时做的一些效果
记录日常练习的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 ...
头部nav增加下拉菜单
参考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使用小计
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 ...
Vue使用小计
组件递归
组件递归时,出现下次标签不渲染。问题处理:
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-cli4+
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 deploy hexo(based on butterfly)
github action 部署博客
准备做的/学的
todos