VUE温习：style层次分析

一、vue样式style层次分析

1、样式可以在main.js、模块js文件、组件style、组件script标签内，index.html文件内引入，不同位置引入的样式有什么关系。

2、总结：

　　（1）样式从main.js的入口处开始顺序加载（注意顺序的意思），

　　（2）遇到组件则加载组件script标签内引入的样式，

　　（3）先处理完所有script中引入的样式，

　　（4）再处理style，style按包含关系从外到内加载（注意这个从外到内的意思）

3、这些页面都是固定的，如果是异步加载页面，当路由切换到另一个页面时，此页面原来的样式是否会删除，当前页面的样式会添加到哪里？

先只会加载到app.vue的style，再点击那个页面就先加载页面的js文件，然后再执行script加载script里引入的css，再加载style里的css

4、如果都是异步加载组件，会怎么样？

　　如果ComA和ComB都是异步组件，则先打开哪一页就加载哪一页的script和style

　　总结：

　　（5）异步组件先显示的先加载，

　　（6）没有显示的页面或组件不加载style

5、一个组件内可以定义不止一个style，并且有scoped的style和没有scoped的style可以并存，它们会按照所定义的顺序加载（注意顺序加载的意思），并跟普通CSS拥有一样的权重优先机制。

6、通过main.js进入的样式是在head中显示，所以如果我们再body中定义样式是可以把head标签内的同名样式覆盖掉的，但是要注意的是在body内引入的样式，因为已经不在main.js控制范围内，也就是不参与打包，所以必须定义在static静态资源目录内。