hbuilderX建立vue項目之添加router路由（前端萌新）

做爲一個剛剛接觸前端不久的新人來講，熟悉了一種目錄結構或者項目建立方法之後，巴不得一生不會變！

但是人要生活，就要工做，既然是打工，固然要知足僱傭者的要求。

今天我來講說 hbuilderX 這個開發軟件，剛剛接觸時，建立項目是這樣的

對於當時建立新項目仍是使用 cmd 命令窗口一步一步建立的我，這簡直是天降福音啊，我立馬就丟棄了先前使用的VS Code 轉而使用 HBuilderX。

然而問題就來了：

運行項目

然而直接報錯了！！我轉念一想，依賴項什麼的都沒有怎麼可能運行成功呢？（嘿嘿，難不倒我）接下來：

直接運行 npm install 加載package.json中須要的依賴項就ok啦，項目就運行成功！

然而，問題又又又來啦！HbuilderX 建立新項目時，是沒有router路由文件夾的：

這就讓我這個純的不能再純的小萌新蒙圈了：router呢？沒有路由個人頁面怎麼去渲染？難不成須要一個一個的去引入？

好吧(╯▽╰)！發現這個問題之後，既然沒有直接建立出來一個router文件夾，那就由本身來了：

首先打開cmd運行窗口（到最後仍是逃不過cmd（T.T））引入router依賴（這裏就不上圖了）

建立router文件夾並建立主文件index，緊接着開始配置router啦（吐槽一下，爲何沒有依賴項提示？爲何沒有依賴項提示？爲何沒有依賴項提示？）

當我刪除掉文件初始（你好，世界（真想吐槽！！））文件，完善本身須要的文件之後，而後我就光榮的掉到坑裏面了~

先上個人錯誤代碼：

考眼力的時候到啦，（各位大佬嘴下留情，內心也留情哈）

而後瀏覽器就給我報了一大~串的紅悠悠的錯誤：

這麼明顯的錯誤，絕對是router依賴的問題，可當時我是千查萬查也沒整明白是個什麼錯誤

通過我浪費了大半個小時的研究（問萬能度）而明白過來，原來引入的方式不對：

正確的引用方式應該是router文件夾下面的index中引入vue-router依賴項：

而入口js（main.js）引入的應該是router文件夾內的index.js(當文件夾下面只有一個index文件的時候，系統是默認使用index文件的，我是這麼認爲的):

像這樣剛纔的問題就解決啦，我想要的頁面也都顯示出來啦

代碼行進路，步步都是坑啊，做爲一個萌新，我要學習的還有不少，但願之後不要被這種問題困到原地，努力賺錢咯！~