vue項(xiàng)目中各文件說明

1.vue-cli腳手架初始化項(xiàng)目

2.node+webpack+淘寶鏡像

3.node_modules文件夾：項(xiàng)目依賴文件

4.public文件夾：放置靜態(tài)資源（圖片），webpack在打包時會原封不動的打包到dist文件夾中。

5.src文件夾（程序員源代碼文件夾）：

• assets文件夾：放置靜態(tài)資源（多個組件共用的靜態(tài)資源），在webpack打包時會把靜態(tài)資           源當(dāng)成模塊打包到JS文件中
• components：放置非路由組件（全局組件）
• APP.vue：唯一的根組件
• main.js：程序入口文件，整個程序中最先執(zhí)行的文件
• api設(shè)計請求相關(guān)的
• 項(xiàng)目的配置項(xiàng)文件

6.babel.config.js：配置文件（與babel相關(guān)），一般不去修改

7.package.json：相當(dāng)于項(xiàng)目的身份證，配置信息，記錄項(xiàng)目叫做什么、項(xiàng)目中有哪些依賴、項(xiàng)目怎么運(yùn)行，

8.package-lock.json：可以刪除，是一個緩存文件

9.README.md：說明性文件

vue項(xiàng)目中文件名簡介

我們創(chuàng)建完項(xiàng)目之后，打開項(xiàng)目文件是這樣的，把原始界面效果清除之后頁面是空白的。

下面介紹一下這些文件都有什么作用

1 node_modules

node_module保存的是npm加載的項(xiàng)目的依賴模塊

2 public

放置圖片

注意：public 與 assets 目錄的區(qū)別

public：public放不會變動的文件 public建議放一些外部第三方

assets：assets放可能會變動的文件，自己的文件放在assets，別人的放public中

public放別人家js文件(也就是不會變動)，assets放自己寫的件(需要改動的文件)

3 src

src文件夾保存的用于開發(fā)的目錄

• 1) assets (放置圖片，主題、字體等靜態(tài)資源)
• 2) components (全局公用組件文件)
• 3) router (路由)
• 4) store (vuex信息/全局 store管理)
• 5) styles (樣式)
• 6) utils (工具)
• 7) views (views 所有頁面)
• 8) App.vue (項(xiàng)目入口頁面)
• 9) main.js (項(xiàng)目的核心文件，入口文件、加載組件、初始化等)

4 .browserslistrc

在使用腳手架搭建項(xiàng)目時，會自動生成.browserslistrc文件，該文件主要是配置兼容瀏覽器

5 .gitignore

.gitignore 可以避免在提交代碼時把我們不想上傳的文件提交到git中

6 babel.config.js

Babel是一個JS編譯器，主要作用是將ECMAScript 2015+ 版本的代碼，轉(zhuǎn)換為向后兼容的JS語法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中。

Vue項(xiàng)目中普遍使用ES6語法，若要求兼容低版本瀏覽器，就需要引入Babel，將ES6轉(zhuǎn)換為ES5。

7 package-lock.json

package-lock.json是在npm install執(zhí)行的時候生成的一份文件，用來記錄package.json的來源和版本號。

• package-lock.json鎖住package.json的來源和版本號，多人開發(fā)拉取代碼，執(zhí)行npm install生成node_modules時依賴的版本能保持一致。
• package-lock.json記錄了版本號和依賴來源，不用node_modules也提交到代碼倉庫中。

注意：如果打不開頁面，可能是兼容版本出現(xiàn)問題，我們這時可以把這個文件刪掉

8 package.json

package.jsons是項(xiàng)目配置的文件，一般和 node_module的資源關(guān)聯(lián)

9 README.md

md文件一般出現(xiàn)在項(xiàng)目的根目錄下面，其作用是：對項(xiàng)目的主要信息進(jìn)行描述。

如果一個項(xiàng)目你很長時間都沒有動，突然你需要修改這個項(xiàng)目，那么通過README.md中對項(xiàng)目的描述能讓你快速的再次上手；或者別人拿到你的項(xiàng)目也能通過README.md文件的描述快速的了解該項(xiàng)目。

10 vue.config.js

vue.config.js是vue打包管理的配置文件，旨在給開發(fā)者們自定義自己的配置

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論