使用vue脚手架时的知识点
样式作用域vue-router安装包
样式作用域
在不同的组件之中对同名标签设置不同的样式时,样式之间会覆盖,比如在 HelloWorld.vue 中设置:
<template
>
<div
class="hello">
<h1
>{{ msg
}}</h1
>
</div
>
</template
>
<style
>
h1
{
color
: red
;
}
</style
>
而在 Test.vue 里面设置:
<template
>
<h1
>{{ name
}}</h1
>
</template
>
<style
>
h1
{
color
: green
;
}
</style
>
最后浏览器页面是:
两个组件的样式彼此之间覆盖了,所以可以在 style 里面使用 scoped 属性来声明作用域:
<style scoped
>
h1
{
color
: green
;
}
</style
>
最后的结果就会和我们想的一样了:
当然,假如使用的是 webstorm 新建的组件,会在模板中默认使用 scoped
vue-router
vue-router 基本使用
安装包
开发所需的包称为开发依赖:使用 --save-dev 的标志进行安装应用运行所需的包称为直接依赖:使用 --save 的标志进行安装