07 SPA单页应用：一级路由

一个vue的单页应用的脚手架程序构建

• 命令行先进入某个目录如D:\VueStudy
• 创建项目: vue init webpack demo
• 进入demo目录安装依赖：npm install
• 修改config目录下index.js的dev端口为80
  5.运行：npm run dev，打开http://localhost，看到Vue主页logo即成功
  image.png

App

<template>
<div id="app" class="container">
<div class="header">
<router-link to="/" class="nav-item">首页</router-link>
<router-link to="/message" class="nav-item">消息</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.container{
width: 80%;
margin: 0 auto;
height: 400px;
}
.header{
display: flex;
height: 100px;
background-color: darkcyan;
font-size: 20px;
padding-left: 20px;
align-items: center;
}
.nav-item{
margin-right: 20px;
}
.content{
background-color: #2c3e50;
color: #ffffff;
}
</style>

Massage.vue

<template>
<div class="container">
<h2>消息</h2>
{{ msg }}
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
msg: '消息'
};
}
};
</script>
<style scoped></style>

index.vue

<template>
<div class="container">
<h2>首页</h2>
{{msg}}
</div>
</template>
<script>
export default{
name:'Index',
data(){
return{
msg:'首页'
};
}
};
</script>
<style scoped>
</style>