一、2.0項目目錄結(jié)構(gòu)

|— build # (webpack配置相關(guān))
| |— build-server.js # 運(yùn)行本地構(gòu)建服務(wù)器，可以訪問構(gòu)建后的界面
| |— build.js # 生產(chǎn)環(huán)境構(gòu)建腳本
| |— dev-client.js # 主要用來實現(xiàn)開發(fā)階段的頁面自動刷新（熱重載）
| |— dev-server.js # 運(yùn)行本地開發(fā)服務(wù)器
| |— utils.js # 構(gòu)建相關(guān)工具方法
| |— webpack.base.conf.js # webpack基礎(chǔ)配置
| |— webpack.dev.conf.js # webpack開發(fā)環(huán)境配置
| |— webpack.prod.conf.js # webpack生產(chǎn)環(huán)境配置
|— config # 配置目錄，包括端口號等
| |— dev.env.js # 開發(fā)環(huán)境變量
| |— index.js # 項目配置文件
| |— prod.env.js # 生產(chǎn)環(huán)境變量
| |— test.env.js # 測試環(huán)境變量
|— node_modules # npm install 安裝的依賴代碼庫
|— src # 存放項目源碼
| |— assets # 放置一些圖片,如logo等
| |— components # 目錄里面存放一些公共組件
| |— App.vue # 根組件
| |— main.js # 入口js文件
|— static # 存放靜態(tài)資源(圖片、字體等),不會被wabpack構(gòu)建
| |— .gitkeep # 當(dāng)static目錄為空文件夾時git也可以提交到代碼倉庫
|— test # 測試文件目錄
|— .babelrc # babel文件的編譯配置
| |— presets # 預(yù)設(shè)轉(zhuǎn)碼規(guī)則
| |— plugins # 除了預(yù)設(shè)的,還可以根據(jù)自己的需求添加其他轉(zhuǎn)碼插件
| |— comments # 轉(zhuǎn)換后代碼生不生成注釋
|— .editorconfig # 編輯器的配置
| |— charset # 編碼
| |— indent_style # 縮進(jìn)風(fēng)格
| |— indent_size # 縮進(jìn)長度
| |— end_of_line # 換行風(fēng)格
| |— insert_final_newline # 創(chuàng)建一個文件是否自動在文件末尾插入一個新行
| |— trim_trailing_whitespace # 移除文件末尾多余的空行
|— .eslintignore # 忽略語法檢查的目錄文件
|— .eslintrc.js # eslint的配置文件
|— index.html # 入口頁面
|— package.json # npm包配置文件
|— favicon.ico # 網(wǎng)站圖標(biāo)

vue2.0.png

二、vue3.0項目目錄結(jié)構(gòu)

vue3.0.png

我們對比發(fā)現(xiàn) vue3.0 默認(rèn)項目目錄相比 2.0 來說精簡了很多。

移除了配置文件目錄， config 和 build 文件夾。

移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 public 中。

在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件。

三、vue-cli 3 與 2 版本有很大區(qū)別：

• vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下；
• vue-cli 3 的項目架構(gòu)完全拋棄了 vue-cli 2 的原有架構(gòu)，3 的設(shè)計更加抽象和簡潔；
• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3
• vue-cli 3 的設(shè)計原則是“0配置”
• vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化

由于 vue-cli 3 的設(shè)計思路是 “0配置”，所以項目初始化后，沒有了以前熟悉的 build 目錄，也就沒有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

那么，我們該如何去配置自己的項目了？

其實這一切都是因為 vue-cli 3 的項目初始化，幫開發(fā)者已經(jīng)解決了 80% ，甚至是絕大部分情形下的 webpack 配置。

上述功能就是由 @vue/cli-service 依賴去處理，當(dāng)你打開 node_modules 目錄下 @vue 中的 cli-service 看一眼，就會發(fā)現(xiàn)和 vue2.0 下的 build 目錄下的配置文件很類似的樣子

image.png