新公司新领导说新项目要用vue和webpack，这两个我都简单看过两眼，跟着网上的教程做个demo的水平，现在要实战，吓得我心里一惊。不过本着迎难而上的精神，简单找了两个教程就开始了我的Vue之路。

插曲：本来这篇文章是要昨天发出来的，结果自己手误把做了一周的项目删了，还好折腾了一会git后很幸运的找回来了，真是惊险啊。

一直都有传Vue很好上手，我也是一直跃跃欲试，但是又怕自己能力不及，半路出现问题不好解决。现在用了几天才发现真的是好用的很啊，省了很多事情，更难的是有很多插件可以解决很多问题，相应的社区也是相当的活跃，基本新手能想到的问题都已经有人解决掉了。

我的起手式是从一个segmentfault上面的一个教程开始的，这里是链接：Vue2.0 新手完全填坑攻略—从环境搭建到发布——Jinkey 原创 非常感谢大牛领路，直接从实现简单页面就带到了组件和路由，新手跟着看一遍做一遍完全可以上手，这篇文章也是站在巨人的肩膀上得来的，感谢！

说到组件，曾经看过阿当大神在慕课网出的一个弹窗组件的教程，看了之后心里很有压力——怎么组件这么复杂？但是用上了Vue的组件之后，就像发现了新大陆，简直是小白专用啊，暖暖的很贴心，哈哈……

准备工作

Vue可以通过传统插件引入的方式使用，也可以通过npm安装使用。非常推荐使用npm的方式，配合cli非常好用。

安装

npm install vue-cli -g
npm install webpack -g

创建：

vue init webpack-simple 工程名字<工程名字不能用中文>

启动：

npm run dev

Vue起步

官方文档：Vue.js

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue组件

Vue的组件一般是.vue后缀的文件，通过类似html页面的方式来实现一个组件一个页面，页面元素是通过、、来实现，在需要这个组件的地方import引入，然后通过components:{componentA,componentB}来进行注册，最后在需要显示的地方通过标签来使用，是不是很简单呢。

第一个组件mycomponent.vue：

<template>
  <div id="firstcomponent"><!--注意id不能取HTML和javascript已经使用的标签，例如header等-->
    <p>这里会显示：{{msg}}</p>
  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      msg: "我是一个组件"
    }
  }
}
</script>
<style>
</style>

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了

第一步，引入。 在标签内的第一行写

import firstcomponent from './component/mycomponent.vue'

第二步，注册。 在标签内的 data 代码块后面加上 components: { a }。记得中间加英文逗号!!!

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步，使用。 在内加上

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>