一個不錯的開頭

1 . 首先全域性裝vue-cli，它是vue的一個腳手架。

cnpm i -g vue-cli

2 . 然後進入workspace。執行了如下程式碼，生成vue專案的初始化工作。這裡是基於webpack打包。

vue init webpack learnvue

3 . 引導定製過程中，測試的選項我全部選了否，完了之後，根據提示，進入learnvue。執行 了

cnpm i

4 . ok，一切順利。然後，執行

cnpm run dev

5 . ok，開啟瀏覽器跑起來了，正常。

然而

6 . 解決scanning files to index

開啟常用的webstorm 10.開啟這個learnvue。看到了 scanning files to index。意思是正在掃描檔案索引。聽起來是專案檔案讀取的問題。怎麼可能要掃描這麼長時間。沒有大檔案呀？於是我放棄這次vue init出來的檔案。決定刪除它。就在我刪除檔案的時候，window提示我檔案目錄結構太深，無法刪除。這讓我想到了什麼，那就是scanning files to index也是這個原因。唯一的就是node_modules。解決 scanning files to index的辦法就是在這個node_module檔案上右鍵。mark Directory As > Excluded。
重新開啟專案。ok!

7 . webtorｍ的兩個vue外掛都裝了。(vue-for-idea和vue.js)

8 . 解決es 6

當我想愉快地嘗試vue的時候，發現script裡的程式碼給我標紅了，說我語法錯誤了。於是在language &&fraｍework裡 解決es 6的問題。並且在vue的script裡用type=”text/babel”或者type=”text/ecmascipt-6”什麼的，還是描紅報錯。

9 . 升級webstorm。

下載了webstorm 2016的安裝包。下了一個破解jar包。（如果有需要的請到qq群454796847裡下載或者進群問少俠要）。順利把webstorm升級到 2016，而且可以匯入以前webstorm的配置。完全不會影響體驗。真棒。es6也認識了。

10 . sass

一切看上去很正常。可是樓主是一個愛折騰的人。覺得把style寫在vue裡感覺彆扭。個人看法，覺得有必要把樣式檔案拎出來。但也不拎得太遠。所以放在components下的vue元件會是這樣一個結構

comonents
–hello//元件名字
—-hello.sass //這個元件的樣式
—-hello.vue //這個元件的本身

為了解析sass檔案，webpack.base.conf.js裡需要加一個處理sass檔案的loder。不多講。
下面我把hello.vue的程式碼貼出來，注意script和style標籤的屬性。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!fkdlsaj;'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
 @import "hello.sass";
</style>

hello.sass

h1
  color: #690
  font-size: 2rem

11 . 最後留下一個題目：

因為把元件寫在資料夾下了，所以在用元件時就會這樣

import Hello from './components/Hello/hello'

這麼長，不爽吧，可以試著元件資料夾里加一個index.js。或者把這些元件全部在webpack.base.conf.js中取個別名。建議用後者。