更新時(shí)間:2022-09-27 來源:黑馬程序員 瀏覽量:
在Vue項(xiàng)目開發(fā)的時(shí)候,為了提高加載時(shí)間和性能,webpack打包工具會(huì)將項(xiàng)目中的文件轉(zhuǎn)為瀏覽器可以讀取的靜態(tài)文件。下面我們來演示如何創(chuàng)建一個(gè)簡單的Vue項(xiàng)目。
(1)在創(chuàng)建項(xiàng)目之前應(yīng)先完成vue-cli腳手架工具的安裝。腳手架工具可以直接生成一個(gè)項(xiàng)目的整體架構(gòu),幫助開發(fā)者搭建Vue.js的基礎(chǔ)代碼。執(zhí)行命令如下:
npm install vue-cli@2.9.x -g
將vue-cli安裝完成后,可以執(zhí)行“vue-cli-V”命令,查看安裝的版本號(hào)。
(2)打開C:\vue\chapter01目錄,執(zhí)行如下命令初始化vue項(xiàng)目:
vue init webpack myapp
在上述命令中,myapp表示項(xiàng)目名稱,可以根據(jù)需要自定義名稱。程序會(huì)自動(dòng)在當(dāng)前目錄下創(chuàng)建myapp子目錄作為項(xiàng)目目錄。webpack表示項(xiàng)目的模板。
(3)在創(chuàng)建項(xiàng)目時(shí),程序會(huì)詢問項(xiàng)目的一些配置選項(xiàng),直接按回車鍵使用默認(rèn)值即可。關(guān)于vue-cli的使用具體會(huì)在之后的章節(jié)中詳細(xì)講解。
接下來分析myapp項(xiàng)目的目錄結(jié)構(gòu),具體解釋如下所示。
1.build:項(xiàng)目構(gòu)建(webpack)相關(guān)代碼。
2.config:配置文件目錄
3.node_modules:依賴模塊
4.src:源碼目錄
5.static:靜態(tài)資源目錄
6.test:初始測(cè)試目錄
7.index.html:首頁入口文件
8.package.json:項(xiàng)目配置文件
9.README.md:項(xiàng)目說明文檔
(4)切換到項(xiàng)目目錄,然后啟動(dòng)服務(wù),具體命令如下:
cd myapp npm run dev
執(zhí)行上述命令后,如果啟動(dòng)成功,會(huì)看到如下提示信息:
Your application is running here: http://localhost:8080
上述信息表示當(dāng)前應(yīng)用已經(jīng)啟動(dòng),可以通過http://localhost:8080來訪問。使用瀏覽器打開這個(gè)地址,運(yùn)行結(jié)果如圖1-15所示。
(5)使用VS Code編輯器打開“C:\chapter01\myapp“目錄,就可以在該目錄下進(jìn)行項(xiàng)目的開發(fā)了。
圖1-15 運(yùn)行結(jié)果