加载顺序以main.js中 important 引入顺序为主，后引入样式会覆盖先引入样式

本地运行时，App以及router相关样式的权值会被提到最高

import App from './App'
// 控制App.vue文件中style的加载


import router from './router'
// 控制view和 components 中相关style的加载

本地运行时css加载顺序：

1. 按序加载 main.js 中important 引入的样式以及组件（除却App以及router）
2. 加载App.vue中 style以及相关组件style
3. 加载当前页面 style 以及页面相关组件style

build（发布到线上）后：

app.xxx.css 加载顺序：按序加载 main.js 中important 引入的样式以及组件（包括App以及router）

router内部加载顺序：

1. notfound 文件style加载
2. 公用组件style加载
3. 页面style以及页面组件style加载

css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”

1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：
   id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
   所以上例中，#navigator的样式优先级大于.current_block的优先级，即使.current_block是最新添加的，也不起作用。

2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
   注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后

规范：

main.js 文件引入顺序

1、静态css文件

2、UI组件库

3、App

4、router

*全局样式尽量在App.vue中引入，在具体业务中引入global，引入多少次，app.css中就会打包多少次

CSS中link和import的加载顺序：

1、import与link的区别：
@import url(“CSS地址”) CSS专用语法
作用：@import作用于团队分工，最后合并一起
可以在.css中使用，即在一个css文件中能够引入另外的CSS文件，
或者是在标签使用，如下：

link：链接 relation：关联(可以省略)
type：类型 href： HyperText Reference超文本引用
作用：主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系

2、link与import加载顺序级别：link比import优先加载
加载顺序对于网站前台重构（优化网页结构，性能）有影响
第一：HTML，同时加载link,CSS和加载import的样式

HTML加载：

1 加载HTML-DOM结构
2 CSS,JS
3 图片，多媒体
4 加载完成后onload事件触发
第二：加载顺序对网站的影响：
import：import放到底部，数据先出来，然后美化
link：CSS优先，边加载，边渲染
link无论放到哪里都是优先加载，import受代码顺序影响

用自己的CSS建议使用link，放前面
用第三方：import,js放到底部，不影响自己网站