Vue學習之路3-淺析Vue-cli搭建項目後的目錄結構

1.前言

Vue並不限制你的代碼結構。可是，它規定了一些須要遵照的規則：
一、應用層級的狀態應該集中到單個store對象中。
二、提交mutation是更改狀態的惟一方法，而且這個過程是同步的。
三、異步邏輯都應該封裝到action裏面。

2.項目文件目錄顯示以下

3.項目文件解析

3.1 build文件

build：文件夾下存放webpack的一些配置，webpack是前端網站的一種項目編譯、運行、打包工具。
build.js：是咱們完成項目以後須要運行的， 能夠將咱們的項目文件打包成靜態文件，存放在項目根目錄的dist文件夾中（如今目錄裏尚未這個文件夾，build的時候會自動生成）。
check-versions.js：主要是檢查一些所依賴的工具的版本是否適用，如nodejs、npm，若版本過低則會提示出來。
logo.png：存放的是vuelogo圖片。
utils.js：提供工具函數，包括生成處理各類樣式語言的loader，獲取資源文件存放路徑的工具函數。
vue-loader.conf.js： 引入了utils.js ，應該是用於切換開發模式和生產模式的文件，以便於用不一樣模式來解析loader。
webpack.base.conf.js：此配置文件是vue開發環境的wepack相關配置文件，主要用來處理各類文件的配置。
webpack.dev.conf.js：在webpack.base.conf的基礎上增長完善了開發環境下面的配置。
webpack.prod.conf.js：構建的時候用到的webpack配置來自webpack.prod.conf.js，該配置一樣是在webpack.base.conf基礎上的進一步完善。

文件示例以下所示：

3.2 config文件

config：文件包含webpack環境配置文件。
index.js：描述了開發和構建兩種環境下的配置。
dev.env.js，prod.env.js，test.env.js：三個文件簡單設置了環境變量。

文件示例以下所示：

3.3 node_moules文件

node_moules：存放的是npm加載的項目依賴模塊 ，之後要添加依賴也是放在這個裏面。

文件示例以下所示：

3.4 src文件

src：放置組件和入口文件。
assets：主要存放一些靜態圖片資源的目錄。
components：這裏存放的是開發須要的的各類組件，各個組件聯繫在一塊兒組成一個完整的項目。
router：存放了項目路由文件。
App.vue：是項目主組件，也是項目全部組件和路由的出口，以後它會被渲染到項目根目錄的 index.html 中顯示出來，咱們能夠在這裏寫一些適合全局的css樣式。
main.js：入口文件，引入了vue模塊和app.vue組件以及路由router，咱們須要在全局使用的一些東西也能夠定義在這裏面。

文件示例以下所示：

3.5 static文件

static:存放的是項目的靜態文件，用於存放須要使用的一些外部的js、css文件，須要使用的時候從這裏引到文件內。

文件示例以下所示：

3.5 test文件

test：初始測試目錄。
unit：單元測試，能夠爲每一個組件編寫單元測試，放在 test/unit/specs 目錄下面，單元測試用例的目錄結構建議和測試的文件保持一致（相對於src），每一個測試用例文件名以 .spec.js結尾。 執行 npm run unit 時會遍歷全部的 spec.js 文件，產出測試報告在 test/unit/coverage 目錄。
e2e：e2e或者端到端（end-to-end）或者UI測試是一種測試方法，它用來測試一個應用從頭至尾的流程是否和設計時候所想的同樣。

文件示例以下所示：

3.6 其餘文件

.babelrc：ES6語法編譯配置。
.editorconfig：代碼編寫規格。
.eslintignore：項目的根目錄中建立文件來告訴ESLint忽略特定的文件和目錄，該文件是純文本文件。
.eslintrc.js：eslint的配置文件，eslint是用來管理和檢測js代碼風格的工具，能夠和編輯器搭配使用，如vscode的eslint插件。當有不符合配置文件內容的代碼出現就會報錯或者警告。
.gitignore：忽略的文件。
.postcssrc.js：兼容選項（若是已經安裝postcss，須要一大堆loader配置，這時項目根目錄會生成「.postcssrc.js」文件）。
index.html：項目文件入口。
package.json：項目及工具的依賴配置文件。
README.md：項目說明。

文件示例以下所示：

總結：礙於本人能力和開發經驗，文章中的不足和錯誤之處歡迎你們留言指出，之後會繼續努力，分享更好更高質量的文章。