xw。。。

 vNav.vue

<template>

  <div>

    <div class="title">

        KGC新闻

    </div>

    <div class="news">

        <ul class="list">

            <li v-for="(item,index) in myChannel" :key="index">{{item}}</li>

        </ul>

        <div class="img" @click="$router.push('/channelManage')">

            <img src="../assets/images/add.png">

        </div>

    </div>

  </div>

</template>

<script>

export default {

    // 计算属性

    computed:{

        // 通过计算属性获取我的频道信息

        myChannel(){

            return this.$store.state.myChannel

        }

    }

};

</script>

<style scoped lang="scss">

.title{

    height: 2.4rem;

    background-color: #d43d3d;

    color: #fff;

    text-align: center;

    line-height: 2.4rem;

}

.news{

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 2rem;

    background: #f4f5f6;

    .list{

        display: flex;

        align-items: center;

        color: #505050;

        overflow-x: scroll;

        flex: 1;

        li{

            padding: 0 10px;

            // 父级空间不够后，子元素不收缩

            flex-shrink: 0;

        }

    }

    .img{

        height: 2rem;

        width: 2rem;

        display: flex;

        justify-content: center;

        align-items: center;

        border-left: 1px solid #ccc;

        img{

            width: 1.5rem;

        }

    }

}

</style>

router index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    component: ()=>import('../views/index.vue')

  },

  {

    path:'/channelManage',

    component:()=>import('../views/channelManage.vue')

  }

]

const router = new VueRouter({

  routes

})

export default router

store index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //所有频道信息

    allChannel:[],

    // 我的频道数组

    myChannel:[]

  },

  mutations: {

    // 加载所有频道的方法

    muChannels(state,val){

      state.allChannel = val

      // 将前四个频道信息添加都我的频道中

      state.myChannel.push(...state.allChannel.slice(0,4))

      // 再删除前四个频道

      state.allChannel.splice(0,4)

    },

    // 添加到我的频道

    increment(state,index){

      // 获取该频道信息

      let channel = state.allChannel[index]

      // 将获取到的频道信息添加到我的频道

      state.myChannel.push(channel)

      // 将频道信息从所有频道中删除

      state.allChannel.splice(index,1)

    },

    // 删除我的频道

    decrement(state,index){

      // 获取该频道信息

      let channel = state.myChannel[index]

      // 将频道添加到所有频道中

      state.allChannel.push(channel)

      // 将频道从我的频道中删除

      state.myChannel.splice(index,1)

    }

  },

  actions: {

    // 加载所有频道的方法

    muChannels(store,val){

      store.commit('muChannels',val)

    },

    // 添加频道

    increment(store,index){

      store.commit('increment',index)

    },

    // 删除频道

    decrement(store,index){

      store.commit('decrement',index)

    }

  },

})

channelManage.vue

<template>

  <div>

    <div class="back" @click="$router.push('/')">频道管理</div>

    <div style="padding:10px">点击删除以下频道</div>

    <div class="list">

        <div @click="decrement(index)" class="item" v-for="(item,index) in myChannel" :key="index">{{item}}</div>

    </div>

    <div style="padding:10px">点击添加以下频道</div>

    <div class="list">

        <div @click="increment(index)" class="item" v-for="(item,index) in allChannel" :key="index">{{item}}</div>

    </div>

  </div>

</template>

<script>

export default {

    computed:{

        // 通过计算属性获取“频道数据”

        myChannel(){

            return this.$store.state.myChannel

        },

        // 返回所有的频道信息

        allChannel(){

            return this.$store.state.allChannel

        }

    },

    methods: {

        // 添加频道

        increment(index){

            // 将当前频道添加到我的频道中，并还从所有频道中移除

            this.$store.dispatch('increment',index)

        },

        // 删除频道

        decrement(index){

            this.$store.dispatch('decrement',index)

        }

    },

};

</script>

<style scoped lang="scss">

.back{

    height: 2.4rem;

    background: #d43d3d url('../assets/images/back.png') no-repeat left center / 1.5rem 1.5rem;

    color: #fff;

    text-align: center;

    line-height: 2.4rem;

}

.list{

    padding: 10px;

    display: flex;

    flex-wrap: wrap;

    .item{

        border: 1px solid #ccc;

        padding: 2px 10px;

        margin: 5px 10px

    }

}

</style>

index.vue

<template>

  <div>

    <vNav></vNav>

    <div>

        <div class="flex j-s item" v-for="(item,index) in news" :key="index">

            <div>

                <img :src="item.pic">

            </div>

            <div class="content">

                <div class="title">{{item.title}}</div>

                <div class="flex j-s time">

                    <div>{{item.time}}</div>

                    <div>{{item.src}}</div>

                </div>

            </div>

        </div>

    </div>

  </div>

</template>

<script>

import axios from 'axios'

import vNav from "../components/vNav.vue";

export default {

  components: {

    vNav,

  },

  data() {

      return {

          news:[]

      }

  },

  created() {

      axios.get('/json/news.json').then(({data:{result:{list}}})=>{

          this.news = list

      })

  },

};

</script>

<style scoped lang="scss">

.item{

    padding: 10px;

    border-bottom: 1px solid #ccc;

    img{

        width: 100px;

        height: 80px;

    }

    .content{

        margin-left: 10px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        .title{

            color: #666;

            font-size: 15px;

        }

        .time{

            font-size: 12px;

            color: #666;

        }

    }

}

</style>

main

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

Vue.config.productionTip = false

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

App.vue

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

<script>

import axios from 'axios'

export default {

  created() {

    // 发送请求，获取频道信息

    this.getNav()

  },

  methods: {

    // 定义发送请求获取频道信息的方法

    async getNav(){

      let {data:{result}} = await axios.get('/json/nav.json')

      this.$store.dispatch('muChannels',result)

    }

  },

}

</script>

<style lang="scss">

*{

  margin: 0;

  padding: 0;

  list-style: none;

  text-decoration: none;

  outline: none;

}

.flex{

  display: flex;

}

.j-s{

  justify-content: space-between;

}

.j-c{

  justify-content: center;

}

.a-c{

  align-items: center;

}

#app {

}

</style>