一、main.js代码
//引入一堆
import Vue from 'vue';
//主体
import App from './components/app.vue';
//引入
import VueResource from 'vue-resource';
//安装插件，插件都是挂载属性
Vue.use(VueResource);
//未来通过this.$http
// Vue是 所有实例对象的构造函数
// Vue.protptype.$http -> 实例(this)就可以.$http
//new Vue 启动
new Vue({
el: '#app',
render: c => c(App),
})
二、app.vue 代码
<template>
<div>
{{data}}
</div>
</template>
<script>
export default {
data(){
return {
data:[]
}
},created(){
// console.log(this.$http);
// this.$http.get('http://182.254.146.100:8899/api/getlunbo')
// .then(res=>{
// this.data = res.body.message;
// },err=>{
// console.log(err)
// })
//post请求
this.$http.post('http://182.254.146.100:8899/api/postcomment/300',{
content:'传智27期，霸气的一批'
},{
emulateJSON:true
})
.then(res=>{
this.data = res.body.message;
},err=>{
console.log(err);
})
}
}
</script>
<style scoped>
.h{
height: 100px;
background-color: yellowgreen;
}
.b{
height: 100px;
background-color: skyblue;
}
.f{
height: 100px;
background-color: hotpink;
}
</style>
*****************************************
一、引入 main.js
//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
//路由切换页面
import header from './components/header.vue'
import footer from './components/footer.vue'
import Music from './components/music.vue'
import Oumei from './components/oumei.vue'
import Guochan from './components/guochan.vue'
//注册全局组件
Vue.component('headerVue', header);
Vue.component('footerVue', footer);
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
//routes
routes: [{
path: '/',
redirect: { name: 'music' },
},
{
name: 'music',
path: '/music',
component: Music,
children: [
//-> 这里很灵活，如果你写上/xxx 就是绝对路径， /oumei
//如果你不写/ ,那么就是相对路径 /music/oumei
{ name: 'music_oumei', path: 'oumei', component: Oumei },
//标识一下，当前路由之间的关系，格式不是必须的
{ name: 'music_guochan', path: 'guochan', component: Guochan }
]
}
]
});
//new Vue 启动
new Vue({
el: '#app',
//让vue知道我们的路由规则
router, //可以简写router
render: c => c(App),
})