如何創(chuàng)建Vue項(xiàng)目和啟動(dòng)項(xiàng)目服務(wù)？

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

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

npm install vue-cli@2.9.x -g

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

(2)打開(kāi)C:vuechapter01目錄，執(zhí)行如下命令初始化vue項(xiàng)目：

vue init webpack myapp

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

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

接下來(lái)分析m yapp項(xiàng)目的目錄結(jié)構(gòu)，具體解釋如表所示。

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

cd myapp
npm run dev

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

Your application is running here:

上述信息表示當(dāng)前應(yīng)用已經(jīng)啟動(dòng)，可以通過(guò)ht/ocalhost8080來(lái)訪問(wèn)。使用瀏覽器打開(kāi)這個(gè)地址，運(yùn)行結(jié)果如圖所示。

(5)使用VS Code編輯器打開(kāi)“C:chapter01\n yapp”目錄，就可以在該目錄下進(jìn)行項(xiàng)目的開(kāi)發(fā)了。