重點學(xué)習(xí)了解工程目錄的作用和分布:
├─ .gitignore ???? # 忽略無需git控制的文件 比如 node_modules
├─? package.json? ? ? ? # 項目配置(npm install 的包讀取自這個文件吆寨,npm install xxx --save 將包下載資源保存至這個文件里)
├─? README.md? ? ? ? ? # 項目說明
├─? index.html? ? ? ? ? # 首頁(localhost:8080默認(rèn)進(jìn)入這個頁面)
├─? config ? ? ? ? ? # 本地調(diào)試配置文件夾
├─ ?build? ? ? ? ? ? ? # webpack 配置文件目錄
├─ ?node_modules? ? ? ? ? # npm依賴包
└─src? ? ? ? ? ? ? ? ? # 開發(fā)目錄
? ? │ app.js? ? ? ? ? # 啟動配置(或者是main.js)
? ? │ app.vue? ? ? ? ? # 入口vue
? ? │ routers.js? ? ? # 路由配置文件
? ? ├─ ?components? ? ? # 組件
? ? ├─ ?assets? ? ? ? ? ? ? # 靜態(tài)資源包(包含以下文件夾)
? ? │? ? ???? styles? ? ? ? ? # css資源文件
? ? │ ? ? ? ? images? ? ? ? ? # 圖片資源文件
? ? │? ? ???? scripts? ? ? ? # JS資源文件
? ? │ ? ? ? ? font? ? ? ? ? ? # 字體資源文件
? ? └─views? ? ? ? ? ? # 頁面
? ? ? ? ? ? home.vue? # 首頁
? ? ? ? ? ? 404.vue? ? # 404頁面
首先訪問index.html ?(id = appp) ?--> ?到main.js文件中,找到appp對應(yīng)的vue文件是App.vue ?--> ?App.vue中有個<router-view/>可以渲染你指定路由對應(yīng)的組件 ?--> ?router中的index.js配置文件,匹配到路由掉盅,找到組件 ?@/components/HelloWorld ?--> ?扎到components中的HelloWorld.vue文件榕莺,并渲染麦锯。至此一個頁面全部加載完畢坛善。