• 這里我試著去簡單分析一個完整的vue項目。
• 好吧，說它完整，其實只是基礎而已，算不上完整。
• 本文步驟是一步一步，哪一步做不對，就不要往下走了。
• 更多文章請關注我的頭條號，我是落筆承冰。

一、安裝node.js，百度nodejs去官網下載安裝文件，點擊安裝文件，下一步下一步，就完成了，安裝過程沒什么可設置的。

• 這一步完成的標準是，命令行輸入node -v會輸出一個版本號給你，還有npm -v也是一樣，只要能輸出版本號，那么證明你這一步成功了。

二、安裝vue-cli，這個就是vue的架框所在，所以我們用命令行“npm install –g vue-cli”來完成它，-g的意思是全局的安裝。

• 這一步的完成標準是輸入vue -V，會得到版本號，記住后面的V是大寫的V。

三、這一步，我們就是要通過命令行來到項目所在位置，我打算把項目安裝在桌面，所以我就通過命令行的cd來到了桌面，我這里是蘋果的操作系統，windows 的操作一樣，無差別。大家想把項目安裝在哪里都可以，什么D盤F盤，哪個目錄下都行。

四、開始安裝項目，命令是“vue init webpack 項目名稱”，這里我用的項目名為vuetest。

五、然后它會問你項目名稱，括號里有了，直接回車吧。

六、這里是項目描述，隨便說說幾句，不說也無所謂。

七、問你作者名，那就寫吧。

八、套路套路，選第一個，不用太清楚這個是什么。

九、是否安裝vue-路由，安裝。

十、還是套路，這個就選n，這個是一個代碼編寫標準，只要有一點點不合標準，就會有錯誤提示，很煩人，建議不設置。

十一、也是一樣，不設置。

十二、不設置。

十三、這里選第一個，use npm。

十四、然后就是漫長的項目創建了，比較久一點，耐心就好，在一堆你看不懂的英文出現之后，安裝就完成了，這個時候會有兩句話很重要，告訴你怎么運行這個項目，而且在你安裝項目的位置多了一個文件夾，文件夾的名字就是你的項目名，我是在桌面安裝的，所以我的桌面多了一個文件夾vuetest。

十五、我們根據項目提示的那兩名話來運行項目吧。

十六、當出現如上圖的提示后，恭喜你，項目運行成功了，我們根據地址“http://localhost:8080”，用瀏覽器打開網址。

十七、我們用一個開發工具打開項目文件夾，這里我用的是vscode，滿滿的文件和文件夾，如果你是初學者，特別沒學過什么編程開發的人，直接會讓你一頭變成兩個大，編程就是一個一個的套路，我們不必要計較太多，現在記了，明天也會忘記，所以跟著我的腳走就可以了。

十八、這么多文件夾和文件，我們只用記一個文件夾就可以了，那就是src。

• 展開src，以后我們操作創建修改基本都會在這里。

十九、我們看到的首頁來自哪里，就來自app.vue組件，我們打開它，把紅線那句刪除掉，那是圖片啊。

• 回到我們的瀏覽器，看看上面的網頁變化，F12控制臺手機模擬顯示吧，圖片果然沒有了。

二十、那網頁那些英文來自于哪里呢，我們看看app.vue，它是來自于路由顯示。

二十一、我們看一下路由，路由文件夾下有一個文件index.js，我們打開它。

• 上面寫得很清楚了，當你打開網站根節點“/”的時候，就是調用組件“HelloWorld”，我們看到的英文，就是來自那個組件helloworld。

• HelloWorld這個組件在哪里呢，在這里，如下圖。

二十二、我們刪除掉那個組件，連文件夾一起，我們不要它了，我們在src下創建一個文件夾pages，然后在里面創建文件夾home，然后在home里面創建一個組件文件Home.vue。

二十三、Home.vue是一個組件，所以一個組件要有三個標準模塊，一個是模板，一個是腳本，一個是樣式，我們要自己寫這三樣。

二十四、加個模板吧。

二十五、我們讓路由為根目錄的時候訪問這個Home組件，所以要改改router文件夾下的index.js，import引入，然后就調用。

• 我們再到瀏覽器查看。

二十六、這張首頁太簡單，我們給首頁加個HomeHead組件吧，在home文件夾里創建一個文件夾components，然后在里面創建一個組件，名為HomeHead.vue。

二十七、即然是組件，那就由三部份組成。

二十八，給這個組件加個模板吧。

二十九、我們讓首頁組件調用它，打開首頁組件Home.vue，讓它引入HomeHead，然后在模板調用它，不要忘記了在components里注冊組件。

三十、homehead組件位置怪怪的，原來是我們生成項目時自帶的樣式在做怪，刪掉它。在哪里，app.vue里。

三十一、該死的body邊框，去掉它。

三十二、按我的方法，還可以加更多的子組件在Home組件里，這里就不多說了。自己摸索吧，對了，命令行下，用ctrl+C可以中斷服務，用“npm run start”重新掛起服務，前提命令行要在項目目錄下。

總結

以上是生活随笔為你收集整理的build vue 选哪个_分析vue-cli项目，简单修改，来快速理解这个项目的结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。