vue-cli初始化項目目錄結構以及vue文件基本結構

在上一篇博文中《vue開發 我們需要準備什么 ？》中，我們已經使用vue-cli腳手架，初始化了一個vue項目，如果不清楚怎么使用vue-cli生成項目的同學，可以翻翻我上一篇博文哈，本文就不重復之前的操作步驟了，直接上項目目錄截圖，我們對比著來看一看，項目中的文件夾以及文件都是什么用途的：

build：項目構建(webpack)相關代碼；

config：配置目錄，包括端口號等。我們初學可以使用默認的。

dist：打包項目目錄地址

node-modules：npm 加載的項目依賴模塊

src：這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。

里面包含了幾個目錄及文件：

assets: 放置一些圖片，如logo等。

components: 目錄里面放了一個組件文件，可以不用。

App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。

main.js: 項目的核心文件。

static：靜態資源目錄，如圖片、字體等。

test：初始測試目錄，可刪除

index.html：項目首頁入口文件，你可以添加一些 meta 信息或統計代碼啥的。

package.json：項目配置文件。這個文件非常重要哦~

README.md：項目的說明文檔，markdown 格式

其他的都是一些配置文件，可以自己打開看看，一般情況下，不怎么需要調整。

下面說一下vue文件的文件結構：

? ? ?

上面的代碼中，template標簽里，寫html標簽，就是頁面文檔結構，script中，寫的是js代碼，實現頁面效果啊數據請求啊業務邏輯什么的，style標簽里，寫的是頁面樣式?；旧蟰ue文件（以.vue為后綴）的結構，就是這三部分了。

單獨說一句，在項目目錄中，index.html是項目首頁入口文件，在src里的main.js，是項目的入口文件，主要作用是：實例化Vue、放置項目中經常會用到的插件和CSS樣式以及

存儲全局變量。App.vue，是項目的根組件，在src目錄下的components目錄，主要用于放置模板文件，補充一下前面介紹目錄結構中，沒有說到的內容。

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。