认识时事通讯应用程序

咱们平时上网总离不开新闻软件？那当然！新闻嘛大家都会关心！用这个小程序就行，啥时候都能了解最新消息。功能超级棒，比如新闻页面动态展示，还能跟别人聊天！做新闻软件的话，必须要用到一个叫Vue的JavaScript框架，有了这货，你的应用会更有意思！

创建Vue项目

首先，咱们得整出个新vue项目来。告诉你们，有个厉害武器——Vue CLI。虽然个子不大，功能却超级强大，能帮我们省心省力地搞定项目设置啦之类的事情。装上Vue CLI后，只需敲敲键盘，项目就建好了，之后就可以开开心心地投入到编程大业里~

安装依赖

vue create news-app

搞定了Vue项目后别忘了加几个关键依赖。比如说，用Vue Router能方便地管理页面跳转（也就是路由）嘛；接着用axel去抓取网页信息，跟爬虫差不多；再来个Vuex帮你管管程序里的各种状态，让代码更加清晰。想要装这些东西？那就选择npm或者yarn这两个包管理器，照着提示走两步，也就花个几分钟而已，你的项目就能顺利运转！

设置路由

换网页靠啥？路由器咯～你瞅瞅 src/router/index.js，这儿头就是网页的地图呀。随便改改，看哪儿就去哪儿，想瞧啥就瞧啥，爽爆了有木有！

cd news-app
npm install axios vue-router

创建组件

你只需要让各种小零件传递新闻就行了。比如说，做个”首页”的home零件，放上news部件里的最新消息就好了。然后把这些做好的零件放到src/views文件夹，按照样式模板打扮一下，搞定！

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/news',
    name: 'news',
    component: News
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

获取新闻数据

在News小工具这，得去后头的服务器找新消息！用axios这个工具上网就能找到新闻接口的回复。有了这些数据，对应的API接口就能处理出来新鲜热辣的新闻，还能直接在那个小屏幕上看，方便大家随时了解动态事件。

更新App.vue

  

    
Welcome to News App
    Go to News
  


export default {
  name: 'Home'
}


h1 {
  color: blue;
}

App.vue可是个关键，它就是咱们VueAPP的起点哩！这里就是把各种各样的小部件拼起来，让用户觉得舒适。要更改什么？找App.vue就对了！放进去需要的组件，设置好导航，界面就整洁了，逻辑也清楚明白。稍作调整，App.vue一弄，APP立刻更炫酷更好使！

运行应用程序

  

    
Top News
    

      

        {{ article.title }}
      
    
  


import axios from 'axios'
export default {
  name: 'News',
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    this.fetchArticles()
  },
  methods: {
    fetchArticles() {
      axios.get('').then(response => {
        this.articles = response.data
      }).catch(error => {
        console.error(error)
      })
    }
  }
}

好了，搞定设置以后，直接开始跑操！记得按启动按钮，再用浏览器输入网址去瞧瞧。第一次使用可能会出现引导页面或者主界面（上面有详细教程和相关跳转通道）。如果要看具体新闻，可从我们提供的API接口获取

扩展功能

放心，功能增加很简单的，随你想什么新功能都能加上去，像是认证啊评论啊新闻分类这种，用起来会更好。

总结与展望

  

    
  


export default {
  name: 'App'
}

看看这篇文章，轻松搞定新闻APP！先搭建个项目，装上必备工具；然后，搞清楚怎么找东西（这里指文件），了解什么叫组件；接下来知道怎么拿和展示数据就行。期待这个超简明教程能帮到你，还鼓励你好好研究下Vue框架那五花八门的功能和实际用途。