vue项目搭建 app.vue

Posted Smile*^

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目搭建 app.vue相关的知识,希望对你有一定的参考价值。

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

以上是关于vue项目搭建 app.vue的主要内容,如果未能解决你的问题,请参考以下文章

Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

vue客户端项目的基本搭建以及ElementUI

vue环境搭建

vue3.0搭建项目+map地图

Vue+webpack从零搭建工程项目

用vue-cli搭建项目踩过的坑