Vue2.0項目入門 — 詳解Vue-cli webpack模板

05-20

來自專欄前端組隊小夥伴

項目結構：

├── 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構建的時候，被直接複製到相同的目錄中。

你應該注意到了，在項目結構上我們有靜態資源兩個目錄：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

啟動一個Node.js本地開發伺服器。

</blockquote>

webpack+vue-loader來處理vue單文件組件
狀態支持熱更新
狀態支持浮層顯示編譯錯誤
在保存的時候，通過ESLint做語法檢測
可以開啟Source maps

npm run build

構建生成環境的資源。

</blockquote>

通過 UglifyJS壓縮JS文件。
通過 html-minifier來壓縮html文件。
通過 cssnano，提取出所有組件內的css文件，合併壓縮到一個單獨的文件。
所有的靜態資源會編譯成哈希值版本來保持長期緩存，生成環境的index.html會自動插入這些編譯後資源文件的url。

npm run e2e

端到端測試。

</blockquote>

在多個瀏覽器中並行運行測試
通過盒子里的一個命令工作。
自動處理 Selenium 和 chromedriver 依賴.
自動創建 Selenium 伺服器.

作者：大青吶

鏈接：https://www.jianshu.com/p/a501690dc433

來源：簡書

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。