今天採用 vue-cli / vue-router / vuex 製作一個含有 routes、統一管理 state 的文章列表。
https://github.com/yichinweng/vue-practice/tree/master/vue-headlines

以下簡單紀錄卡關部分：

• 使用 vue-router 製作 SPA，頁面間切換時不要使用 <a>，會導致真正的重導向，採用 $router.push (以前玩 React 明明踩過一次，還硬要再踩一次 Orz)。
• 採用 vue single file component 時，inner component 的寫法如下，此寫法要開啟 runtimeCompiler。
  其他更多種做法可以參考：Writing multiple Vue components in a single file。
• 子組件要使用父組件的 methods 時，要加上.native修飾字。

<!-- template 區段 -->
<HeadlineTitle
  v-for="(item, index) in headlines.articles"
  v-bind:article="item"
  v-bind:key="index"
  v-on:click.native="moveToContent(index)"></HeadlineTitle>
<!-- js 區段 -->
const HeadlineTitle = {
  props: ['article'],
  template: `
    <li>
        {{ article.title }}
    </li>`
};

• build 後直接開啟為空白，需要自己建立 vue.config.js 設定 baseUrl，並確認 vue-router 關閉 history mode。