vue-cli实例：

用WebStrom查看已构建的项目：

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

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

index.vue代码：

userCenter.vue代码：

userInfo.vue代码：

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中建立导航栏，代码如下：

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: ''
})

二、点击添加用户：

User.vue：

app.vue：

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

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

npm install vue-resource --save

Users.vue：

app.vue：

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: ''
})