<template>
<div /> -->
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// 局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import foot from './components/foot'
export default {
name: 'app',
data(){
return {
title:"这是我的第一个vue脚手架"
}
},
// components: {
// // HelloWorld
// }
components:{
"users":Users,
"app-header":Header,
"app-foot":foot,
}
}
</script>
<!-- scoped域 使 App.vue User.vue两中的样式不影响-->
<style scoped>
/* 在App.vue中设置h1的样式，则在User.vue会出现效果 */
h1{
color: pink;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Header.vue
<template>
<header>
<h1>{{title}}</h1>
</header>
</template>
<script>
export default{
name:'app-header',
data(){
return {
title:"Vue.js Demo"
}
}
}
</script>
<style scoped>
header{
background-color: lightcyan;
padding: 10px;
}
h1{
color: palegreen;
text-align: center;
}
</style>