1. 程式人生 > >vue資料夾結構解析

vue資料夾結構解析

package.json

什麼是Node.js的模組(Module)?在Node.js中,模組是一個庫或框架,也是一個Node.js專案。Node.js專案遵循模組化的架構,當我們建立了一個Node.js專案,意味著建立了一個模組,這個模組的描述檔案,被稱為package.json。通常情況下package.json內容出錯,會導致專案出現bug,甚至阻止專案的執行.

它定義了這個專案所需要的各種模組,以及專案的配置資訊(比如名稱、版本、許可證等元資料)。npm install 命令根據這個配置檔案,自動下載所需的模組,也就是配置專案所需的執行和開發環境。

package.json檔案可以手工編寫,也可以使用npm init

命令自動生成。npm安裝package.json時  直接轉到當前專案目錄下用命令npm install 或npm install --save-dev安裝即可,自動將package.json中的模組安裝到node-modules資料夾下。

package.json 中新增中文註釋會編譯出錯

package-lock.json 

package-lock.json 是在 `npm install`時候生成一份檔案,用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號。為的是讓開發者知道只要你儲存了原始檔,到一個新的機器上、或者新的下載源,只要按照這個package-lock.json所標示的具體版本下載依賴庫包,就能確保所有庫包與你上次安裝的完全一樣。

如果我們安裝時的包有bug,後面需要更新怎麼辦?

在以前可能就是直接改package.json裡面的版本,然後再npm install了,但是5版本後就不支援這樣做了,因為版本已經鎖定在package-lock.json裡了,所以我們只能npm install [email protected]  這樣去更新我們的依賴,然後package-lock.json也能隨之更新。

.postcssrc

指定使用的 css 預編譯器,裡面預設配置了 autoprefixer ,自動補全瀏覽器字首

.gitignore

指定 git 忽略的檔案,所有 git 操作均不會對其生效

.eslintr

配置 eslint 的檢測規則,強制按照規則書寫程式碼

.eslintignore

指定 eslint 忽略的檔案

.editorconfig

程式碼的規範檔案,規定使用空格或 tab 縮排,縮排的長度是兩位還是四位之類的程式碼風格,使用的話需要在編輯器裡下載對應的外掛

.babelrc

 使用 babel 的配置檔案,用來設定轉碼規則和外掛

static 資料夾

靜態資原始檔夾,放置不會變動的資源,直接被複制到最終的打包目錄(預設是dist/static)下

src 資料夾

我們主要操作的地方,元件的增加修改等都在這個資料夾裡操作

node_modules

專案的依賴庫

config 資料夾

主要是指定開發和打包中的靜態資源路徑、要壓縮的檔案型別、開發使用的埠號、開發使用虛擬伺服器跨域請求 api 等

build 資料夾

裡面是對 webpack 開發和打包的相關設定,包括入口檔案、輸出檔案、使用的模組等