首頁技術(shù)文章正文

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

更新時間:2022-09-27 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  在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ù)需要自定義名稱。程序會自動在當前目錄下創(chuàng)建myapp子目錄作為項目目錄。webpack表示項目的模板。

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

  接下來分析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

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

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

1664261397131_圖1-15運行結(jié)果.jpg

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

分享到:
在線咨詢 我要報名
和我們在線交談!