Vue项目流程

     修改导航栏到样式 可以写在登陆页面的style标签里 但是因为nav-bar的样式整个项目都是一致的 所以对于nav-bar的样式我们写在全局样式

 之前就建好了一个写全局样式的文件

 

标签是van开头

 

 但是渲染到页面上还是一个有class类名的div标签

 

 通过设置 成功的给nav-bar添加了背景颜色 但是因为这个nav-bar已经写好了默认样式 我们自己写的样式 优先级不够高 被默认样式覆盖掉了

css优先级的6大分类：

通常可以将css的优先级由高到低分为6组：

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}

第六优先级：通配选择器，如*{marigin:6px;}

因为我们写的样式优先级不够高 所以在后面加上一个！important 提升我们的样式

设置完了nav-bar的背景颜色 现在要设置里面的字体颜色 这就牵涉到了一个知识点 后代选择器

研究写好的项目 发现去更改字体样式是在van-nav-bar__title这个div盒子里并且van-nav-bar__title这个盒子是存在于van-nav-bar这个盒子里面 是van-nav-bar的后代

需要在项目里使用表单组件 那么首先先要在utils/vant.js文件里引入这个表单标签

这个组件里面还有一个button按钮 所以这个按钮也要导入

复制form表单组件的代码到Login/index.vue登陆页面 完成样式布局