先是跟著 http://www.openopen.com/lib/view/open1476240930270.html

搭建了環(huán)境，中間遇到了一些問題，還好都一一解決了。下面總結(jié)一下：

Paste_Image.png

demo演示效果

Paste_Image.png

先寫主體App.vue

<template>
  <div id="app">
    ![](./assets/logo.png)
     <router-view></router-view>
    <first></first>
    <second></second>
    <ul>
      <li><router-link to="/first">點(diǎn)我跳轉(zhuǎn)到第一個(gè)頁面{{name}}</router-link></li>
      <li><router-link to="/second">點(diǎn)我跳轉(zhuǎn)到第二個(gè)頁面</router-link></li>
    </ul>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="line-height: 36px; color: #20A0FF">豆瓣電影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
    </el-card>
  </div>
</template>

<script>
import first from './components/first.vue'
import second from './components/second.vue'
export default {
  data(){
    return {
      name:'app',
      articles:[]
    }
  },
  components:{first,second},
  mounted:function () {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10',
      {},{
        headers:{},emulateJSON:true}).then(function (response) {
      console.log(response.data.subjects)
      this.articles=response.data.subjects
    },function (response) {
      console.log(response)
    })
  }
}
</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 router from './router'
import VueRouter from "vue-router"
import VueResource from 'Vue-resource'
Vue.use(VueRouter);
Vue.use(VueResource);

當(dāng)然了，這里resource不是必須的。
接著定義組件

//定義組件
const First={template:"<div><h2>我是第一個(gè)子頁面呀</h2></div>"}
import second from "./components/second.vue"

這里分別有直接創(chuàng)建template方式構(gòu)建組件，還有import方式引入組件??
然后創(chuàng)建路由：

//創(chuàng)建一個(gè)路由實(shí)例
//并配置路由規(guī)則
const router=new VueRouter({
  // mode:'history',
  // base:__dirname,
  routes:[
    {
      path:'/first',
      component:First
    },
    {
      path:'/second',
      component:second
    }
  ]
})

path是路徑，component放上面聲明的組件。搞定！
創(chuàng)建Vue實(shí)例

const app=new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App},
})

npm run dev 運(yùn)行，結(jié)束。