vue-cli实例：

用WebStrom查看已构建的项目：

一、构建一个简单的Vue导航栏菜单实例：

1、新建组件文件夹（pages）及文件（index、userCenter、userInfo）： 

index.vue代码：

<template>
  <div>
    <p>这是首页</p>
  </div>
</template>

<script>
export  default {

}
</script>

<style>
p{
  background: #ffe87c;
}
</style>

userCenter.vue代码：

<template>
  <div>
    <p>这是个人中心</p>
    <router-link to="/userCenter/userInfo">用户信息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  p{
    background: #d6e9c6;
  }
</style>

userInfo.vue代码：

<template>
  <div>
    <p>My name is Samve Duan!</p>
  </div>
</template>

<script>
export default {}
</script>

<style>
  p{
    background: #77FFFF;
  }
</style>

2.在路由配置文件中，导入新建的组件。（index.js我们不用了）

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/index'
import UserCenter from '../pages/userCenter'
import UserInfo from '../pages/userInfo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index',
      component: Index
    },
    {
      path: '/userCenter',
      component: UserCenter,
      children: [
        {
          path: 'userInfo',
          component: UserInfo
        }
      ]
    }
  ]
});

3.在项目入口App.vue中建立导航栏，代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>这可以看做是导航栏</p>
    <router-link to="/index">首页</router-link>
    <router-link to="/userCenter">个人中心</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.修改main.js 
将

import router from './router'

改为：

import router from './router/router.js'

main.js代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/router.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

二、点击添加用户：

User.vue：

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users"><input v-model="user.contacted" type="checkbox"/><span :class="{deleteLine: user.contacted}">{{user.name}}:{{user.email}}</span> <button @click="deleteUser(user)">x</button></li>
    </ul>
    <form @submit="addUser">
    name: <input v-model="user.name"/>
    email: <input v-model="user.email"/>
    <p><input type="submit" value="添加用户"/></p>
    </form>
  </div>
</template>

<script>
export default {
  name: 'users',
  data: function(){
    return {
      user: {},
      users: [
        {
          name: 'zhoujielun',
          email: 'zhoujielun@gmail.com',
          contacted: false
        },
        {
          name: 'zhouhuajian',
          email: 'zhouhuajian@gmail.com',
          contacted: false
        },
        {
          name: 'youhongming',
          email: 'youhongming@gmail.com',
          contacted: false
        }
      ]
    }
  },
  methods: {
    addUser: function(e){
      this.users.push({
        name: this.user.name,
        email: this.user.email,
        contacted: false
      });
      this.user = {};
      e.preventDefault();
    },
    deleteUser: function(index){
      this.users.splice(this.users.indexOf(index), 1)
    }
  }
}
</script>

<style scoped="">
ul{
  list-style-type: none;
}
ul li{
  list-style-type: none; line-height: 22px;
}
.deleteLine{
  text-decoration: line-through;
}
</style>

app.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <users></users>
  </div>
</template>

<script>
import Users from './components/Users.vue'
export default {
  name: 'App',
  components: {
    Users
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、使用vue-resource从第三方读取数据：

打开项目所在文件夹，安装vue-resource：

npm install vue-resource --save

Users.vue：

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users"><input v-model="user.contacted" type="checkbox"/>{{user.contacted}}<span :class="{deleteLine: user.contacted}">{{user.name}}:{{user.email}}</span> <button @click="deleteUser(user)">x</button></li>
    </ul>
    <form @submit="addUser">
    name: <input v-model="user.name"/>
    email: <input v-model="user.email"/>
    <p><input type="submit" value="添加用户"/></p>
    </form>
  </div>
</template>

<script>
export default {
  name: 'users',
  data: function(){
    return {
      user: {},
      users: [
        {
          name: 'zhoujielun',
          email: 'zhoujielun@gmail.com',
          contacted: false
        },
        {
          name: 'zhouhuajian',
          email: 'zhouhuajian@gmail.com',
          contacted: false
        },
        {
          name: 'youhongming',
          email: 'youhongming@gmail.com',
          contacted: false
        }
      ]
    }
  },
  methods: {
    addUser: function(e){
      this.users.push({
        name: this.user.name,
        email: this.user.email,
        contacted: false
      });
      this.user = {};
      e.preventDefault();
    },
    deleteUser: function(index){
      this.users.splice(this.users.indexOf(index), 1)
    }
  },
  created: function(){
    this.$http.get('http://jsonplaceholder.typicode.com/users').then(function(response){
      this.users = response.data;
    })
  }
}
</script>

<style scoped="">
ul{
  list-style-type: none;
}
ul li{
  list-style-type: none; line-height: 22px;
}
.deleteLine{
  text-decoration: line-through;
}
</style>

app.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <users></users>
  </div>
</template>

<script>
import Users from './components/Users.vue'
export default {
  name: 'App',
  components: {
    Users
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'//全局安装vue-resource

Vue.use(VueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})