Vuejs基本知識一專案資料夾基本結構

根據前面章節，我們安裝了webpack, vue-cli, 並執行成功，看到了vuejs的第乙個頁面。

那麼首先，我們需要對webpack 下的vuejs有個全面的了解。

在我們執行了命令後，

$ vue init webpack my-project

會生成乙個嶄新的專案。它的檔案結構如下：

▸ build/ // 編譯用到的指令碼 ▸ config/ // 各種配置 ▸ dist/ // 打包後的資料夾 ▸ node_modules/ // node第三方包 ▸ src/ // 源** ▸ static/ // 靜態檔案, 暫時無用 index.html // 最外層檔案 package.json // node專案配置檔案

下面我們針對重要的檔案和資料夾來依次說明.

這個資料夾中，保留了各種打包指令碼。是不可或缺的，不要隨意修改。

展開後如下：

▾ 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

打包使用，不要修改。

檢查npm的版本，不要修改。

是在開發時使用的伺服器指令碼。不要修改。（借助於node這個後端語言，我們在做vuejs開發時，可以通過$npm run dev這個命令，開啟乙個小的server, 執行vuejs. )

不要修改。做一些css/sass 等檔案的生成。

非常重要的配置檔案，不要修改。內容是用來輔助載入vuejs用到的css source map等內容。

這三個都是基本的配置檔案。不要修改。

跟部署和配置相關。

▾ config/ dev.env.js index.js prod.env.js

開發模式下的配置檔案，一般不用修改。

生產模式下的配置檔案，一般不用修改。

很重要的檔案，定義了:

對於這個資料夾的內容，我們會在後續的章節中陸續進行解釋（例如對於某個頁面的渲染過程，如何做****)

打包之後的檔案所在目錄，如下。

▾ dist/ ▾ static/ ▾ css/ ▾ js/ manifest.577e472792d533aaaf04.js manifest.577e472792d533aaaf04.js.map vendor.5f34d51c868c93d3fb31.js vendor.5f34d51c868c93d3fb31.js.map index.html

可以看到，對應的css, js, map, 都在這裡。

請大家注意檔名中的無意義的字串，這個是隨機生成的。目的是為了讓檔名發生變化，方便我們的部署，也方便nginx伺服器重新對該檔案做快取。

manifest.js：生成的周邊js 檔案

vendor.js：生成的vendor.js 檔案

切記：這個資料夾不要放到git中。因為每次編譯之後，這裡的檔案都會發生變化。

node專案所用到的第三方包，特別多，特別大。$ npm install所產生。所有在package.json中定義的第三方包都會出現在這裡。

package.json :

// ... "dependencies": , "devdependencies": // ...

node_modules資料夾裡面往往會有幾百個資料夾，看起來如下：

這個資料夾不要放到git中。

最最核心的源**所在的目錄。展開後如下所示（不同版本的vue-cli生成的目錄會稍有不同，不過核心都是一樣的）：

▾ src/ ▾ assets/ logo.png ▾ components/ book.vue booklist.vue hello.vue ▾ router/ index.js main.js

用到的都可以放在這裡。

用到的"檢視"和"元件"所在的資料夾。（最最核心）

路由檔案。定義了各個頁面對應的url.

沒有實際的業務邏輯，但是為了支撐整個vuejs框架，存在很必要。

Vuejs基本知識一專案資料夾基本結構

一專案概覽

一專案準備

一專案管理基礎知識

Vuejs基本知識 一 專案資料夾基本結構

一 專案概覽

一 專案準備

一 專案管理基礎知識

相關推薦

Vuejs基本知識一專案資料夾基本結構

一專案概覽

一專案準備

一專案管理基礎知識