Web前端培訓(xùn)：如何構(gòu)建一個Vue項目？

　　在Vue項目開發(fā)的時候，為了提高加載時間和性能，webpack打包工具會將項目中的文件轉(zhuǎn)為瀏覽器可以讀取的靜態(tài)文件。下面我們來演示如何創(chuàng)建一個簡單的Vue項目。

　　(1)在創(chuàng)建項目之前應(yīng)先完成vue-cli腳手架工具的安裝。腳手架工具可以直接生成一個項目的整體架構(gòu)，幫助開發(fā)者搭建Vue.js的基礎(chǔ)代碼。執(zhí)行命令如下：

npm install vue-cli@2.9.x -g

　　將vue-cli安裝完成后，可以執(zhí)行“vue-cli-V”命令，查看安裝的版本號。

　　(2)打開C：\vue\chapter01目錄，執(zhí)行如下命令初始化vue項目：

vue init webpack myapp

　　在上述命令中，myapp表示項目名稱，可以根據(jù)需要自定義名稱。程序會自動在當(dāng)前目錄下創(chuàng)建myapp子目錄作為項目目錄。webpack表示項目的模板。

　　(3)在創(chuàng)建項目時，程序會詢問項目的一些配置選項，直接按回車鍵使用默認(rèn)值即可。關(guān)于vue-cli的使用具體會在之后的章節(jié)中詳細(xì)講解。

　　接下來分析myapp項目的目錄結(jié)構(gòu)，具體解釋如下所示。

　　1.build：項目構(gòu)建(webpack)相關(guān)代碼。

　　2.config：配置文件目錄

　　3.node_modules：依賴模塊

　　4.src：源碼目錄

　　5.static：靜態(tài)資源目錄

　　6.test：初始測試目錄

　　7.index.html：首頁入口文件

　　8.package.json：項目配置文件

　　9.README.md：項目說明文檔

　　(4)切換到項目目錄，然后啟動服務(wù)，具體命令如下：

cd myapp
npm run dev

　　執(zhí)行上述命令后，如果啟動成功，會看到如下提示信息：

Your application is running here: http://localhost:8080

　　上述信息表示當(dāng)前應(yīng)用已經(jīng)啟動，可以通過http://localhost:8080來訪問。使用瀏覽器打開這個地址，運行結(jié)果如圖1-15所示。

　　(5)使用VS Code編輯器打開“C：\chapter01\myapp“目錄，就可以在該目錄下進(jìn)行項目的開發(fā)了。

　　圖1-15 運行結(jié)果