相思花.png
項目結構：
├── build/ # webpack 編譯任務配置文件: 開發環境與生產環境
│ └── ...
├── config/
│ ├── index.js # 項目核心配置
│ └── ...
├ ── node_module/ #項目中安裝的依賴模塊
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue組件
│ ├── components/ # 組件
│ │ └── ...
│ └── assets/ # 資源文件夾，一般放一些靜態資源文件
│ └── ...
├── static/ # 純靜態資源 (直接拷貝到dist/static/里面)
├── test/
│ └── unit/ # 單元測試
│ │ ├── specs/ # 測試規范
│ │ ├── index.js # 測試入口文件
│ │ └── karma.conf.js # 測試運行配置文件
│ └── e2e/ # 端到端測試
│ │ ├── specs/ # 測試規范
│ │ ├── custom-assertions/ # 端到端測試自定義斷言
│ │ ├── runner.js # 運行測試的腳本
│ │ └── nightwatch.conf.js # 運行測試的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 編輯配置文件
├── .gitignore # 用來過濾一些版本控制的文件，比如node_modules文件夾
├── index.html # index.html 入口模板文件
└── package.json # 項目文件，記載著一些命令和依賴還有簡要的項目描述信息
└── README.md #介紹自己這個項目的，可參照github上star多的項目。
build/
這個目錄包含實際為開發環境與生產環境的webpack配置文件。通常你不需要關注這些文件，除非你想自定義webpack的loader，這樣的話，應當先看看build/webpack.base.conf.js這個文件。
src/
這個是你放絕大部分程序代碼的地方。如何管理這個目錄內的所有內容隨你決定；如果你使用Vuex，建議的結構一般是這樣的：
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API請求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我們組裝模塊并導出 store 的地方
├── actions.js # 根級別的 action
├── mutations.js # 根級別的 mutation
└── modules
├── cart.js # 購物車模塊
└── products.js # 產品模塊
static/
這個目錄是你不想通過webpack處理的靜態資源目錄。這些目錄中的資源會在webpack構建的時候，被直接復制到相同的目錄中。
<blockquote>
你應該注意到了，在項目結構上我們有靜態資源兩個目錄：src/assets和static/。他們之間有什么區別？
詳細說明請點擊Vue2.0項目入門—靜態資源目錄src/assets和static/區別
</blockquote>
test/unit
包含單元測試相關文件。
test/e2e
包含端到端測試相關文件。
index.html
這個是單界面應用中的模板Index.html。在開發環境中，webpack會生成相關資源，這些資源的url會自動插入到模板來渲染最終的HTML。
package.json
npm包元數據文件，包括所有的構建依賴與構建命令。
所有的構建命令，都會通過NPM腳本執行。
npm run dev
<blockquote>
啟動一個Node.js本地開發服務器。
</blockquote>
- webpack+vue-loader來處理vue單文件組件
- 狀態支持熱更新
- 狀態支持浮層顯示編譯錯誤
- 在保存的時候，通過ESLint做語法檢測
- 可以開啟Source maps
npm run build
<blockquote>
構建生成環境的資源。
</blockquote>
- 通過 UglifyJS壓縮JS文件。
- 通過 html-minifier來壓縮html文件。
- 通過 cssnano，提取出所有組件內的css文件，合并壓縮到一個單獨的文件。
- 所有的靜態資源會編譯成哈希值版本來保持長期緩存，生成環境的index.html會自動插入這些編譯后資源文件的url。
npm run e2e
<blockquote>
端到端測試。
</blockquote>
- 在多個瀏覽器中并行運行測試
- 通過盒子里的一個命令工作。
自動處理 Selenium 和 chromedriver 依賴.
自動創建 Selenium 服務器.
