vue项目搭建 app.vue

Posted 2020-12-06 Smile*^

<template>
<div id="app">
<!-- <h1>{{title}}</h1> -->
<app-header></app-header>
<users></users>
<app-foot></app-foot>
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

</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>