寫這篇文章是因為想學習一下vuex，說實話，一直在用vue，但是它核心的vuex卻還沒有用過。
https://segmentfault.com/a/1190000005015164
這篇文章寫得很好，就是有點舊了，那個時候是1年前寫的吧。

現在我將用vue-cli自動化構建工程，然後搭配vuex來搭建一個筆記應用。

第一步 vue-cli

vue-cli安裝非常簡單，它為我們節省了很多webpack配置檔案。

# 安裝 vue-cli
npm install -g vue-cli

# 初始化 webpack 專案
vue init webpack my-project
cd my-project
 

# npm可能出現訪問速度極慢的情況，推薦使用cnpm
npm install
#安裝 vux 發版請使用 npm install [email protected]
npm install vux
#安裝less-loader, vuejs-templates模板預設不安裝less less-loader
npm install less less-loader --save-dev
# 除錯
npm run dev

這是我們的安裝日誌：

後面詢問了是否用vue-router 我選擇了no，因為這裡應該用不到vue-router吧（如果要用，我們後面再安裝吧）

看一下生成的目錄檔案:

• build資料夾是npm run build之後構建的build檔案，以及一些配置檔案，
• config資料夾放的是一些配置檔案。
• static故名思義是靜態檔案。
• index.html是主頁面，當然這裡面只有一個div節點名為app。
• 最重要的是src資料夾:
  
  • 這裡面的幾個資料夾assets 存放靜態檔案，比如圖片等，說明一下，vue一般是把css寫在每個vue中的
  • components是元件，一個頁面可以理解為由很多很多的元件組成的。
  • app.vue就是主要的頁面，可以理解為把這些元件組合起來的檔案。
  • main.js其實是用於組合app.vue 和index.html

ok 我們npm run dev來看看。

tipS：遇到這種問題，乾脆直接把node_modules資料夾刪了吧，然後重新npm install。有時候檔案放久了之後也會有這個問題。反正重新npm install就好了。

接著重新npm run dev，可以看到程式已經執行起來了。

預設是8080埠，如果你的8080埠被佔用了，也會報錯，當然這個埠號也可以自己去配置的，這裡就不說了。

這裡顯示的頁面其實就是components/Hello.vue ，可以自己改Hello.vue來看看，這裡也不寫了，而且這裡自動構建的是熱載入（即你一修改完，頁面就會相應的顯示，不需要再npm run dev）。下面就開始構建筆記應用了。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>