最近參考IMOOC基於Vue的音樂實戰專案，自己模仿的寫了一遍，整體來說收穫很多。
接下來我會對整個專案進行簡單的整理分析，希望能更深入理解，更深刻的掌握。因為涉及到知識點比較多，所以我打算分成四個模組來分析。

專案地址

• 專案結構
• 目錄分析

檔案篇

一、專案結構

專案由vue官方釋出的腳手架vue-cli快速搭建

專案目錄如下：

專案:
│  .babelrc
│  .editorconfig
│  .gitignore
│  .postcssrc.js
│  index.html
│  package.json
│  README.md
│
├─build
│      build.js
│      check-versions.js
│      dev-client.js
│      dev-server.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│
├─node_modules
│  ├─.bin
│
├─src
│  │  App.vue
│  │  main.js
│  │
│  ├─api
│  │      .gitkeep
│  │      singer.js
│  │
│  ├─common
│  │  │  .gitkeep
│  │  │
│  │  ├─fonts
│  │  │
│  │  ├─image
│  │  │      default.png
│  │  │
│  │  ├─js
│  │  │      utils.js
│  │  │
│  │  └─stylus
│  │          base.styl
│  │          index.styl
│  │          mixin.styl
│  │          reset.styl
│  │          variable.styl
│  │
│  ├─components
│  │  ├─b-listView
│  │  │      listView.vue
│  │  │
│  │  └─v-header
│  │         header.vue
│  │         logo@2x.png
│  │         logo@3x.png
│  │
│  ├─router
│  │      index.js
│  │
│  └─store
│          actions.js
│          getters.js
│          index.js
│          mutation-types.js
│          mutations.js
│          state.js
│
└─static
        .gitkeep

二、目錄分析

---

1. babelrc

介紹

babelrc下一代javascript語法編譯器。
由於瀏覽器版本和相容性，導致es6語法並不能完全可用，因此babel誕生；babel可以讓你放心使用大部分的JavaScript的新的標準的語法，然後編譯成相容絕大多數的主流瀏覽器的程式碼。

• presets(預設),也就是一堆plugins的預設，起到方便的作用。
  • env
  • es2015/es2016/es2017/latest
  • react
  • stage-x(stage-0/1/2/3/4)
• plugins(外掛)

最佳實踐

{
 "presets": [
   "es2015",
   "stage-0"
 ],
 "plugins": ["transform-runtime"]
}

如何寫好.babelrc？Babel的presets和plugins配置解析

官方文件

---

2. editorconfig

介紹

讓使用不同編輯器的開發者在共同開發一個專案時“無痛”地遵循編碼規範

使用 EditorConfig 來解決上面的問題。只需兩步

• 在專案根建立一個名為 .editorconfig 的檔案。該檔案的內容定義該專案的編碼規範。EditorConfig 支援的編碼規範在後文會有詳細的介紹。
• 安裝與編輯器對應的 EditorConfig 外掛。

當你在編碼時，EditorConfig 外掛會去查詢當前編輯檔案的所在資料夾或其上級資料夾中是否有 .editorconfig 檔案。如果有，則編輯器的行為會與 .editorconfig 檔案中定義的一致，並且其優先順序高於編輯器自身的設定。

最佳實踐

root = true

# 對所有檔案生效
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# 對字尾名為 md 的檔案生效
[*.md]
trim_trailing_whitespace = false

EditorConfig 介紹

官網

---

3.gitignore

介紹

git為我們提供了一個.gitignore檔案只要在這個檔案中申明那些檔案你不希望新增到git中去，這樣當你使用git add .的時候這些檔案就會被自動忽略掉。

最佳實踐

- a.忽略指定檔案/目錄

# 忽略指定檔案
HelloWrold.class
# 忽略指定資料夾
bin/
bin/gen/

- b.萬用字元忽略規則

# 忽略.class的所有檔案
*.class
# 忽略名稱中末尾為ignore的資料夾
*ignore/
# 忽略名稱中間包含ignore的資料夾
*ignore*/

Git忽略檔案.gitignore的使用

官網

---

4.postcssrc.js

介紹

post-loader的外掛配置檔案

PostCSS 是個什麼鬼東西？

---

5.package.json

介紹

每個專案的根目錄下面，一般都有一個package.json檔案，定義了這個專案所需要的各種模組，以及專案的配置資訊（比如名稱、版本、許可證等後設資料）。npm install命令根據這個配置檔案，自動下載所需的模組，也就是配置專案所需的執行和開發環境。

scripts指定了執行指令碼命令的npm命令列縮寫，比如start指定了執行npm run start時，所要執行的命令。

dependencies欄位指定了專案執行所依賴的模組。

devDependencies指定專案開發所需要的模組。

它們都指向一個物件。該物件的各個成員，分別由模組名和對應的版本要求組成，表示依賴的模組及其版本範圍。

package.json

package.json檔案

---

6.build/config

介紹

vue-cli自帶的webpack配置

• build - 編譯任務的程式碼
• config - webpack 的配置檔案

具體程式碼分析詳見參考文件：

vue-cli的webpack模板專案配置檔案分析

vue-cli#2.0 webpack 配置分析

---

7.src目錄

介紹

專案的開發目錄，是整個專案最重要部分；包括開發程式碼以及靜態資原始檔（字型等）

• api 自定義資料夾，存放所有介面呼叫，暴露響應函式
• common 公共目錄，存放公用js/css/images/fonts等
  • stylus 存放所有公用樣式，reset/variable/base等
• components 元件目錄，包括基礎元件和業務元件
• router 配置路由，Vue.use(Router)且暴露給外面
• store 存放Vuex相關檔案，下面會詳細分析
• App.vue 專案根元件
• main.js 專案主入口

---

8.src/common/stylus目錄

介紹

存放所有公用樣式，切割成單獨作用的樣式檔案

• reset 樣式重置
• icon 圖示字型
• base 基礎設定，整個專案都使用
• index 主入口，引入reset、icon、base；在main.js中引入
• mixin 混合（清浮動等方法），哪裡需要哪裡引用
• variable 樣式規範（顏色，字型），哪裡需要哪裡引用

---

9.src/store目錄

介紹

存放Vuex相關檔案

• actions 類似於 mutation，提交的是 mutation，而不是直接變更狀態。Action 可以包含任意非同步操作。
• getters 從store中的 state 中派生出一些狀態，用於外部獲取state相關狀態
• index Vuex的主入口，暴露Store
• mutation 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation
• state 用一個物件就包含了全部的應用層級狀態。至此它便作為一個『唯一資料來源(SSOT)』而存在

最佳實踐

import { mapGetters, mapMutations, mapActions } from 'vuex';

//computed 中使用mapGetters語法糖(... 是es6的物件擴充套件)
//state中currentIndex變化，響應式引起getters中對應currentIndex變化
//從而引起computed中currentIndex的變化，最後對映到DOM中
computed:{
    ...mapGetters([
        'currentIndex',
        'fullScreen',
        ...
    ])
}

//mapMutations/mapActions語法糖和物件擴充套件，將SET_PLAYING_STATE擴充套件到methods
//呼叫this.SET_FULL_SCREEN方法，改變state中對應狀態，響應到getters中
methods:{
    ...mapMutations({
        setFullScreen: 'SET_FULL_SCREEN',
        setPlayingState: 'SET_PLAYING_STATE',
        ...
    }),
}

vuex最簡單、最詳細的入門文件

Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

官方文件

---