前面换公司了一直很忙没时间写笔记（其实就是变懒= =），后面会定时更新学习笔记！加油！
最近在写公司官网，因为官网是单人开发技术栈都是自己定，还是选择了老baby Vue，之前一直使用的是element框架，这次换成了iView，两者相比较，(以下仅为个人意见，不服憋着):
一些小众组件上各有所长整体 iView 更加丰富，通过使用频率最高的form table 日历 select 等组件对比两者API风格
代码上明显感觉iView 的api 更加简洁，在生成类似表格 下拉框这些较复杂的组件时， iView 是直接传数据进去，在内部实现了模板生成，高效快捷。而element 则是用到到v-for vue指令结合的方式去生成，批量生成元素。
表格 操作列自定义渲染的时，iview 使用的是vue的render 函数， element 直接在template 中插入对应模板，表格分页都需要引入分页组件配合使用。
表单校验两者都使用同一款插件async-validator 校验方式一样。
两者api 总体比较，iview 要比element 简洁许多。element更侧重于在template里直接去渲染模板。
思想上个人觉得iview偏向react, element 更vue。
项目优化角度
首屏优化，第三方组件库依赖过大会给首屏加载带来很大的压力，一般解决方式是按需求引入组件。
element的文档会更加详细，iView 按需加载感觉官方给的文档不是很详细。
- 使用fullPage.js
之前在非框架搭建项目中使用过这个插件，很久没使用了，个人感觉后续自己公司项目中还会使用这个所有写了一套详细的api分析和使用。
安装
npm install vue-fullpage.js
入口文件main.js
import Vue from 'vue';
// ...
import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
// ...
Vue.use(VueFullPage);
Demo
<template>
<div>
<full-page :options="options">
<div class="section">
<div class="box1">
section1
</div>
</div>
<div class="section">
<div class="box2">
section2
</div>
</div>
<div class="section">
<div class="box3">
section3
</div>
</div>
</full-page>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
options: {
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
afterLoad: this.afterLoad, // method中的方法 即回调函数
scrollOverflow: true,
scrollBar: false,
menu: '#menu',
// navigation: true,
// anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
}
}
}
}
</script>
<style lang="less" scoped>
</style>
详细配置 options
//为每个section设置背景色
sectionsColor: ["#f00","#0f0","#00f"],
//用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消失
controlArrows: false,
//每一页幻灯片的内容是否垂直居中
verticalCentered: false,
//字体是否随着窗口缩放而缩放
resize: true,
//页面滚动速度
scrollingSpeed: 700,
//定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同
anchors: ["page1","page2","page3"],
//是否锁定锚链接
lockAnchors: true,
//定义section页面的滚动方式，需要引入jquery.easings插件
easing:,
//是否使用css3 transform来实现滚动效果
css3: false,
//滚动到最顶部后是否连续滚动到底部
loopTop: true,
//滚动到最底部后是否连续滚动到顶部
loopBottom: true,
//横向slide幻灯片是否循环滚动
loopHorizontal: false,
//是否循环滚动，不会出现跳动，效果很平滑
continuousVertical: true,
//是否使用插件滚动方式，设为false后，会出现浏览器自带的滚动条，将不会按页滚动
autoScrolling: false,
//是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效
scrollBar: true,
//设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用
paddingTop: "100px",
//设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用
paddingBottom: "100px",
//固定的元素，为jquery选择器；可用于顶部导航等
fixedElements: ".nav",
//是否可以使用键盘方向键导航
keyboardScrolling: false,
//在移动设置中页面敏感性，最大为100，越大越难滑动
touchSensitivity: 5,
//设为false，则通过锚链接定位到某个页面不再有动画效果
animateAnchor: false,
//是否记录历史，可以通过浏览器的前进后退来导航
recordHistory: true,
//绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动
menu: '.nav',
//是否显示导航，设为true会显示小圆点作为导航
navigation: true,
//导航小圆点的位置，可以设置为left或者right
navigationPosition: right,
//鼠标移动到小圆点上时显示出的提示信息
navigationTooltips: ["第一页","第二页","第三页"],
//是否显示当前页面小圆点导航的提示信息，不需要鼠标移上
showActiveTooltip: true,
//是否显示横向幻灯片的导航
slidesNavigation: true,
//横向幻灯片导航的位置，可以为top或者bottom
slidesNavPosition: bottom,
//内容超过满屏时是否显示滚动条，需要jquery.slimscroll插件
scrollOverflow: true,
//section选择器
sectionSelector: ".section",
//slide选择器
slideSelector: ".slide"
方法
//向上滚动一页
moveSectionUp();
//向下滚动一页
moveSectionDown();
//滚动到第几页，第几个幻灯片；页面从1计算，幻灯片从0计算
moveTo(wection,slide);
//和moveTo一样，但是没有动画效果
silentMoveTo(section,slide);
//幻灯片向右滚动
moveSlideRight();
//幻灯片向左滚动
moveSlideLeft();
//动态设置autoScrolling配置项
setAutoScrolling(boolean);
//动态设置lockAnchors配置项
setLockAnchors(boolean);
//动态设置recordHistory配置项
setRecordHistory(boolean);
//动态设置scrollingSpeed配置项
setScrollingSpeed(milliseconds);
//添加或删除鼠标/滑动控制，第一个参数为启用、禁用；第二个参数为方向，取值包含all、up、dowm、left、right，可以使用多个，逗号分隔
setAllowScrolling(boolean,[directions]);
//销毁fullpage特效，不写type，fullpage给页面添加的样式和html元素还在；如果使用all，则样式和html等全部被销毁
destroy(type);
//重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果
reBuild();
回调函数
//滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接受anchorLink和index两个参数，anchorLink是锚链接名称，index是序号，从1计算
afterLoad(anchorLink,index);
//在离开一个section时，会触发一次此回调函数；index是离开的页面的序号，从1计算；nextIndex是滚动到的目标页面的序号，从1开始计算；direction判断往上滚动还是往下滚动，值为up或down。通过return false，可以取消滚动
onLeave(index,nextIndex,direction);
//页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterRender();
//浏览器窗口尺寸改变后的回调函数
afterResize();
//滚动到某一slide后的回调函数，与afterLoad类似
afterSlideLoad(anchorLink,index,slideAnchor,slideIndex);
//在离开一个slide时，触发此回调函数，与onLeave类似
afterSlideLoad(anchorLink,index,slideIndex,direction,nextSlideIndex);
- 配置rem
rem.js
// 设置 rem 函数
function setRem() {
let htmlWidth =
document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
let htmlDom = document.getElementsByTagName("html")[0];
// 设置根元素字体大小
htmlDom.style.fontSize = 16 * (htmlWidth / 375) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem();
};
在main.js中导入
import "./assets/js/rem.js"
安装 vscode 插件 结合使用
cssrem
在首选项设置中搜索 `cssrem` 配置html font-size
