六、Vue2

1.基本结构

文件的相对位置

在这里插入图片描述

一个基本的Vue文件分为三层，html的模板层，组件层，渲染层
也可以省略之前所有的js渲染，用vue做渲染

新建一个Child.vue
在这里插入图片描述
然后将Child.vue渲染到cmp1.js上

在组件层，将child引入进来，并且注册，就可以渲染生效了。

然后cmp作为child父级的身份，仅把cmp添加到Vue的入口index.js主模板内，由于绑定了div1，所以主页index.html就可以直接生效了，换句话说，也可以说是把cmp1当做了一个slot，层层堆叠，将页面画出来。
当然也可以稍微随便添加点css样式

在这里插入图片描述

开启热更新，会自动弹出对应的页面。

vue_23">2.App.vue

App.vue作为一个主的组件可以配置路由等元素属性，像之前作为父级的cmp1，也可以写在app里，那么现在就创建一个app，然后将cmp1的内容放进去，再将原来的cmp1.js删除
这是新的文件相对位置
在这里插入图片描述
然后调整文件导入app的相对位置，避免报错，整理之后重新编译。

然后创建路由表./router/index.js

import Vue from 'vue';

import router from 'vue-router';
import Index from '@/index.vue';
import News from '@/news.vue';

Vue.use(router);

export default new router({
    routes:[
        {
            path:'/',
            name:'index',
            component:Index
        },
        {
            path:'/news',
            name:'news',
            component:News
        }
    ]
});

不创建路由表挂载，元素就不会起作用，就像router-link router-view
切记一点！！！！import Vue-router进来的时候，一定要把参数名定义成router，Vue才能识别，不然就会报错说无法匹配src/app
创建路由表之后，将两个路由地址对应的网页进行简单设计。

最后来到app.vue内进行路由地址的跳跃行为，使用router-link+v-bind即可
在这里插入图片描述
最后热更新调试到页面就可以了。

3.Axios组件通信

首先引入Axios vue-Axios的第三方库，然后导入到Vue的入口处
在这里插入图片描述
然后就可以使用了
但切记，一定要按照顺序use，不然会报错

为了验证我们的数据通信，所以在根目录创建一个data/1.json,并且做一个异步的访问

<template>
    <div class="">
        首页
    </div>
</template>

<script>
    export default {
        name:'index',
        data() {
            return{}
        },
        async created() {
            let {data} = await this.axios.get('http://localhost:8081/data/1.json');
            console.log(data);
        }
    }
</script>

<style scoped>

</style>