四月初，vue随意记，随意说，不专业（主要完成维基首页布局）

1、举一反三，非常关键，讲师的代码不一定是最佳代码。
2、优先排查出原先遗留的错误。

vue-cli 3.0的 自带路由 但是配置有点问题，导致build 页面跳转各种错误，白屏。

删除mode 和 base即可

3、开始制作维基百科首页
（仔细看了下，挺有难度）
路由的调配，以及全局信息气泡框。

第一步：分析，二级路由配置，布局

4、路由是不会显示在页面左下角的

而href会。

5、载入字体文件
必须href引入，而href是在index.html根目录文件中，所以需要对其进行BASE_URL确定目录。

6、vue-cli3.0本地模拟axios请求(细节配置，vue.config.js配置）

7、NUXT进阶框架封装了SSR方法，
async asyncData（先于渲染请求axios）
async nuxtServerInit(先于app.vue加载vuex实现全局挂载)
vue ssr方法是没有的。需要修改前端的架构（初学者根本不可能）。
但是可以做出想要的效果， 比如通过v-if

8、滚动条出现导致页面抖动。
这种情况最好是确定绝对会出现滚动条。
那么就让滚动条一直出现就好了
body {overflow-y: scroll}

9、nth-child 和 nth-of-type
li:nth-child(n) li的父元素为源，向下找第n个元素。(数n个元素）
p:nth-child(n) p的父元素为源，向下找第n个p元素。(数不确定个元素)

10、border设置渐变色
border: 2px solid ;
border-image: linear-gradient(#eee,#fff) 100 10
后边的数值自行调配，我也没搞明白。
其次 如果设置border的盒子本身宽度很小 那么渐变色几乎没效果。

11、flex布局可以强制防止子元素因为宽度不够问题下榻。使布局始终水平。

12、原生js永远是第一，就好像人脑始终超越电脑，因为人脑有思维。电脑只有算法。下面是原生JS实现维基百科的，双侧导航栏各自点击触发高亮效果。


13、vue全局注册axios事件

main.js 入口文件中

2019年4月2日09:25:32
1、文字环绕图片布局，最简单的就是p img 同级，让img， float：left即可。但是想要实现任意位置的环绕。需要加一个空div并清除img的浮动，让其下坠。

2、word-break: break-all 使单词不必按单位换行，撑满则换行。
2.1如果使文本标签浮动那么标签不具备inline自动换行属性。

3、float:left 之后的布局可能会出现层叠状态，可以用块状元素使子元素右对齐，可以用text-align: right代替

2019年4月2日10:48:51，完成布局第一块，也是最后一块。


开始简化dom
过了2-3个小时。
发现问题
4、 json中的引号包裹的对象字符，不支持换行

2019年4月2日13:49:44，首页50%完成，位置布局采用语义化标签，内容未语义。

且 实现流式布局自适应。（最小宽度600px，整体自适应效果良好）
这一次耗时非常久，加上构思，思考，应该有14-16小时。
这个布局，数据完全调用的是axios请求的数据，数据完全由自己编写，编写到中途才发现，其实完全没必要，因为这本来就是展示的页面，并没有用户交互行为，虽然axios会简化页面的dom节点，但是，对于单页面spa来说，还是没必要，你只要负责好你自己页面的整洁度就行，展示型的网页和axios获取数据思考的逻辑并不挂钩。不过也算是提升自己的能力，对于axios和单页spa有了更深的理解。

5、:style动态绑定（和:class一样，只接收对象），传参的一种方式如下。