目錄結(jié)構(gòu)

webpack：是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。并且提供了前端項目的熱部署插件。

調(diào)用關(guān)系

我們最主要理清index.html、main.js、App.vue之間的關(guān)系：

理一下：

• index.html：html模板文件。定義了空的div，其id為app。

• main.js：實例化vue對象，并且通過id選擇器綁定到index.html的div中，因此main.js的內(nèi)容都將在index.html的div中顯示。main.js中使用了App組件，即App.vue，也就是說index.html中最終展現(xiàn)的是App.vue中的內(nèi)容。index.html引用它之后，就擁有了vue的內(nèi)容（包括組件、樣式等），所以，main.js也是webpack打包的入口。

• index.js：定義請求路徑和組件的映射關(guān)系。相當(dāng)于之前的<vue-router>

• App.vue中也沒有內(nèi)容，而是定義了vue-router的錨點：<router-view>,我們之前講過，vue-router路由后的組件將會在錨點展示。

• 最終結(jié)論：一切路由后的內(nèi)容都將通過App.vue在index.html中顯示。

• 訪問流程：用戶在瀏覽器輸入路徑，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路徑對應(yīng)pages/item/Brand.vue組件) --> 該組件顯示在App.vue的錨點位置 --> main.js使用了App.vue組件，并把該組件渲染在index.html文件中（id為“app”的div中）

?

總結(jié)

以上是生活随笔為你收集整理的项目结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。