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

更新時(shí)間：2024年02月08日 10:01:10 作者：_藍(lán)胖子

這篇文章主要介紹了vue項(xiàng)目中各文件的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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

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

2.node+webpack+淘寶鏡像

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

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

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

assets文件夾：放置靜態(tài)資源（多個(gè)組件共用的靜態(tài)資源），在webpack打包時(shí)會(huì)把靜態(tài)資源當(dāng)成模塊打包到JS文件中
components：放置非路由組件（全局組件）
APP.vue：唯一的根組件
main.js：程序入口文件，整個(gè)程序中最先執(zhí)行的文件
api設(shè)計(jì)請(qǐng)求相關(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：可以刪除，是一個(gè)緩存文件

9.README.md：說明性文件

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

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

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

1 node_modules

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

2 public

放置圖片

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

public：public放不會(huì)變動(dòng)的文件 public建議放一些外部第三方

assets：assets放可能會(huì)變動(dòng)的文件，自己的文件放在assets，別人的放public中

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

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)目時(shí)，會(huì)自動(dòng)生成.browserslistrc文件，該文件主要是配置兼容瀏覽器

5 .gitignore

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

6 babel.config.js

Babel是一個(gè)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í)行的時(shí)候生成的一份文件，用來記錄package.json的來源和版本號(hào)。

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

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

8 package.json

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

9 README.md

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

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