Vue项目的第一个Hello world组件：Hello Vue，讨论一下Vue的核心特性以及webpack式开发的项目特点

上一节把一个Vue的完整目录及其意义记录了一下，接下来就来写一个我们的第一个Vue组件，一个最简单的Hello Vue

我们在上回说的components文件夹下面新建一个HelloVue.vue文件。
然后在里面写上下面的代码：

<template>
  <div>
    <p>Hello, Vue!</p>
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default ({
  name: 'HelloVue',
  data () {
    return {
      msg: 'Fala oviara'
    }
  }
})
</script>

这样第一个组件我们就算写好了。观察一下组件内部的一些小细节：

• 在template标签内部写我们原先的html代码

• 在script标签内部写组件封装的JS代码

  • 其中export default为当别的地方引入这个组件时，组件暴露给外部的方法、变量等等

• 当然，如果针对这个组件有特殊的样式需求的话，可以在这个组件文件里写style标签去声明样式

看一下我们第一个Hello Vue组件出来的效果：
这里我想讨论两个Vue框架的特性。

• 声明式渲染

  vue.js的核心是允许采用简洁的模板语法来声明式地将数据渲染进 DOM

  根据文档上描述，Vue中的数据都是以声明的方式渲染进DOM的，在Hello Vue中我们用了一个最简单的模板，即：

  // HTML
  <div id="app">
    {{ msg }}
  </div>
  // JS
  var app = new Vue({
    el: '#app'
    data: {
        msg: 'Fala oviara'
    }
  })
  

  并且从此以后，msg这个变量就变成了响应式变量，我们不必去辛辛苦苦操作DOM上的元素，而是在JS中去操作app这个Vue对象即可。也就是说组件中的所有数据，我们都是在组件的对象里去操作，至于对象怎么变成HTML，一切都交给Vue就行了。响应式是什么意思呢？只要你在JS中修改了msg的值，（例如app.msg = 'another value'）HTML相应地就会被修改。
  但是你们可能会发现，我上面的代码好像和文档上的不太一样？文档上新建了一个Vue的对象，而我的Hello Vue代码里并没有，这是怎么回事呢？这里就引出我想讨论的第二点：

• Vue组件中需要新建Vue对象吗？

  答案是不需要。这里就引申出我们创建的vue项目的特性了，它是基于webpack开发形式的。我未来会用另一篇博文阐述它和其他开发模式的不同。而这个开发模式最大的特点，就是整一个项目之中会有一个**入口文件**，在我们这个项目中，就是main.js, 在这个文件里，我们会声明一个Vue对象，这个对象就作为整个项目的App，所有其他的组件应该在这个app里面去引用。我们写的组件，都会被vue的loader自动重载为实例或组件对象。

  如果不明白这个特性，很可能会对组件的写法上产生一些疑惑或者误会。

Hello Vue的内容补充

所以，如果你是在项目之中写Hello Vue组件的，你可能会找不到自己写好的组件在哪里，因为入口文件中并找不到你刚刚写好的组件。之前我没有说的是，在我写好Hello Vue组件之后，还有一步就是把这个组件放到我们的路由文件里。路由文件其实就是一个地图，告诉你上哪去找我们的组件。
在router > index.js中，

1. 在文件头引入我们的组件。

import HelloVue from '@/components/views/HelloVue'

1. 在Router对象的routes属性里面新添加一个组件path对象：

    {
      path: '/views/hellovue', // 路径
      name: 'Hello,Vue', // 名称
      component: HelloVue // 组件
    }

这样一来，在URL中输入以下地址，就能让我们项目APP的路由部分跳转到刚才写好的Hello Vue里面了。

入口页面

地址栏写入http://localhost:8080/#/views/helloVue跳转：

当然，我们一个项目中，页面的跳转肯定不能让用户自己去地址输入，需要用一些按钮之类的点击跳转，这些内容以后再记录分享给大家。
通过第一个Hello Vue项目，我们讨论了Vue框架的核心：声明式渲染，它带来的渲染特性，以及一个webpack式的Vue项目的特点。未来的博文还会继续探索vue，目前为止，我还是很喜欢这个框架的 :P