这篇主要说说App.vue入口文件和routes.js路由配置文件,配置过程中遇到了各种奇怪的错误,不知道大家遇到没有,遇到的话,推荐先看下上篇博客:关于vue的语法规则检测报错问题
App.vue:
<template>
<div id="app">
<router-view class="value" keep-alive transition transition-mode="out-in"></router-view>
</div>
</template>
<script>
export default {
name: 'app',
component: {}
}
</script>
<style lang="scss">
#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>
跟路由index.vue将渲染在
<router-view class="value" keep-alive transition transition-mode="out-in"></router-view>
routes.js页面配置如下:
// 引用模板
import index from '../page/index'
import content from '../page/content'
// 配置路由
export default[
{
path: '/',
component: index
},
{
path: '/content',
component: content
}
]
配置好以后,启动项目:
index.vue页面:
<template>
<div class="index">
<h1 class="title">选择恐惧症的福音!教你认清MVC,MVP和MVVM</h1>
<ul>
<li v-for="item in lists">{{item.title}}</li>
</ul>
</div>
</template>
<script>
export default{
data() {
return {
lists: []
}
},
created() {
// 组件创建完后获取数据,这个就是vue生命周期的创建完成周期
this.get_data();
},
methods: {
get_data: function (params) {
if (!params) params = {}
// 我们这里用全局绑定的$api,方法来获取数据
this.$api.get('topics',params,r=>{
this.lists = r.data;
console.log(r.data);
})
}
}
}
</script>
<style lang="scss">
@import './../style/scss/index'
</style>
调用的接口配置在api.js里,刷新页面,一个初步的vue小项目就完成了: