用vue-cli 與vuex一步一步搭建一個筆記應用(一)

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

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

第一步 vue-cli

vue-cli安裝非常簡單，它爲我們節省了很多webpack配置文件。

vue-cli的使用請查看[文檔][https://github.com/vuejs/vue-cli]

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

# 初始化 webpack 項目
vue init webpack my-project
cd my-project
# npm可能出現訪問速度極慢的情況，推薦使用cnpm
npm install
#安裝 vux 發版請使用 npm install vux@next
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來看看。

哦嗚這裏報錯了。
看日誌說是Error: Cannot find module ‘wrappy’找不到wrappy模塊。
我這裏再單獨下載wrappy: cnpm install -g wrappy 也無法解決。

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>