akayi写字的地方

写vue反复遇到的bug，记不住，记录一下。

根元素只有一个。

–updated on 20200229 –

webpack的版本，loader,babel真是大坑，版本更新问题一大堆，遇到的问题最后发现都是版本问题，浪费了很多时间在里面。
比如vue-loader最新版本需要VueLoaderPlugin, babel-loader和babel-core版本不一致等等。

被坑了几个小时，webpack的安装配置，应该是我理解错误或者别人帖子说错了，总结一下。
我是用的局部安装，打包直接可以用的是找webpack二进制文件。如果用npm start/npm run start(只有几种命令可以没有run)，后面不能加webpack（就是被帖子坑了。。。），
如果不修改webpack.config.js或package.json，默认输出到./dist里，文件名为’main.js’,入口默认为./src下的’index.js’，但是我发现入口可以是其他路径的其他名字的文件，
出口不能在命令中改路径和名字。

但是package.json可以改变/添加scripts中的命令，可以加mode（里面有main属性等），我下载的是webpack4.41.6，可以零配置，就是上述默认，可以自己建立webpack.config.js,
设置在module.exports中设置entry：’’|| {} || …和output{filename, path},path可以let path = require(‘path’),__dirname表示当前路径，可以拼接，path要绝对路径！
配置文件也可以设置mode：none || ‘development’ || ‘production’。如果是这两种配置方法，npm run就改变了入口出口路径名字。

入口import … from …可以直接导入组件和Vue，对于模块导出的{key}和函数，可以类似这样导入：{key1, key2, func}。

对于导出有几种方式，先声明后导出var key1 = 2; export {key1};导出并声明export var key2 = 3;和export default App;

js性能优化的知识:使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间，而且使用Eval有安全性问题。

今天在网上看了写轮播图的思路，我先跟着敲了一遍，接着自己做了一遍，思路是利用变量index（索引），用浮动，绝对定位和相对定位完成图片，按钮，圆点等的布局，然后用javaScript方法获取相应的NodeList，通过index的增减决定active类（要切换的元素加上active类）应用的元素来切换图片，
对于自动轮播，可以用setInterval()函数来定时，设置变量time=0，点击圆点time会重置为0防止图片自动切换，有利于用户友好。

1.绝对定位不区分块级/行内/行内块级，统一视为块级元素，可设置宽高，宽度默认为内容的宽度

2.绝对定位默认情况下，元素位置在正常文档流中的位置，但脱离了文档流，不占据文档流的位置

3.元素如果存在宽度left和right只能设置一个，都设置的话只有left起作用，元素如果存在高度同理top和bottom也只有一个起作用，都设置只有top起作用，但是如果没有显示的设置width和height，则可以通过left、right、top以及bottom来计算出width和height

4.默认情况下，无论绝对定位元素有没有祖先元素，都以body为参考点，此时是以网页首屏（body很大的话可以理解为第一页，不论水平方向还是垂直方向）尺寸为参考点

5.如果一个绝对定位元素有祖先元素，且祖先元素也是定位流（相对定位、绝对定位、固定定位），这里静态定位（静态定位其实就是元素的默认定位方式即不设置postion属性时）除外，那么该元素的会以这个祖先元素作为参考点，如果存在多个祖先元素都是定位流情况，按照就近原则，最近的祖先元素为参考点

6.绝对定位元素会忽略祖先元素的padding属性

7.绝对定位元素水平居中，只要设置left为50%，margin-left为负宽度的一半即可

1.纯CSS实现圆角框:，我应用了一下，虽然border-radius就可以。发现一个问题，无论我怎么设置，都只有上下边框，但是通过了css验证和html验证，然后肉眼debug出来了，我把border：#000;写在后面覆盖了边框样式，简写属性省略的值取默认值，border-style默认值是none,所以我前面的样式失效了。
2.div {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0
bottom: 0;
width: 100px;
height: 100px;
}
为什么能在浏览器中居中。这个问题昨天找了一天，没有可靠的解答，今天找到个解释，姑且放这，以后深入学习一下验证正确性：https://blog.csdn.net/Mr_lizi/article/details/83384468 和 https://blog.csdn.net/qq_39148344/article/details/83018735 ，(Keyword:格式化高度和宽度，流动性)。个人试了一下，无论left,right,bottom,right取什么值，都可以达到目的，margin: auto; 在绝对定位元素的水平和垂直方向都起作用了，目前看来这一解释是可信的。
3.让一个HTML节点居中的各种实现方式一些思路：https://www.cnblogs.com/SallyShan/p/11480685.html 。里面有些错误，如inline-block。

通过freecodecamp的html+css+bootstrap部分的学习，目前在做第一个项目的第二天，致敬页面，发现不熟悉bootstrap，写一些学习心得。
第一个项目致敬托尔金：

1. Boostrap缩略图的默认设计仅需最少的标签就能展示带链接的图片，通过“thumbnail”样式配合bootstrap的网格系统来实现缩略图，thumbnail中间是图片，图片周围是一小圈空白，外面是边框和圆角，下面是文字。
2. 去年学习过前端了，所以很奇怪，我做的页面块引用比例子中的小，经过反复试验，发现是bootstrap的类class="jumbotron"的作用。
3. 发现能把它的内容加上长连字符，疑似Bootstrap效果，需要再学习
4. bootstrap中的col-xs/sm/md/lg-* col-xs/sm/md/lg-offset-*可以让页面响应不同的屏幕
5. github pages弄了一晚上项目页面，改成index.html就好了，jekell不太会用
6. 不知道为什么置顶功能失效了，可能不小心改了什么，google和国内搜到的方法都不行，可能是因为我fork的模板被改过，以后学习一下吧。
7. vertical-align属性只对行内元素有效，对块内元素无效

学习过程中所作的小项目和练习：

1. 致敬约翰·托尔金
2. 回信练习
3. Mozilla启动页面

之前学过html,css,javascript.jquery,python,javaee,c等，但是不完整，通过freecodecamp(国内连接不稳定，可能打不开)重新复习加学习，结合知乎上的学习方式。

• 20191128——20191201-学习freecodecamp到第一个项目Build a Tribute Page结束
• 20191201-完成了致敬托尔金的demo后,后面还有一些内容，我觉得可以先放下，快速复习下去年学习的Head First HTML and CSS和CSS: The Definitive Guide, 4th Edition,再学习下MDN中的 HTML 和 CSS 的部分。
现在是2020117还在看javascript，进度太慢。javascript高级程序设计最后的一些看不懂了，先放着，做了些demo，总比没有好。JavaScript语言精粹、JavaScript 教程（感觉学得不好又看了这个）和ECMAScript 6 入门。

目前用2周多一点学完了head first html&css，目前在学JavaScript DOM编程艺术（第2版），第8章困扰了我好几天，包括前面的几章，经常效果出不来，sublime text和dreamweaver也不知道怎么找bug，最后用DiffMerge一个个对比才找出来是拼写错误，把element写成了elemetn，真是浪费时间，这是个教训。