使用vue脚手架时的知识点

样式作用域

• 在不同的组件之中对同名标签设置不同的样式时，样式之间会覆盖，比如在 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 的标志进行安装