Vue開發常用的工具有哪些?

語言: CN / TW / HK

​本節小編將對Vue的開發環境以及常用工具的使用進行講解。

1.Visual Studio Code編輯器

Visual Studio Code(VS Code)是由微軟公司推出的一款免費、開源的編輯器,推出之後便很快流行起來,深受開發者的青睞。作為前端開發人員來說,一個強大的編輯器可以讓開發變得簡單、便捷、高效。本書選擇基於VS Code編輯器進行講解。

VS Code編輯器具有如下特點:

(1)輕巧極速,佔用系統資源較少。

(2)具備語法高亮顯示、智慧程式碼補全、自定義快捷鍵和程式碼匹配等功能。

(3)跨平臺。不同的開發人員為了工作需要,會選擇不同平臺來進行專案開發工作,這樣就一定程度上限制了編輯器的使用範圍。VSCode編輯器不僅跨平臺(支援Mac、Windows以及Linux),使用起來也非常簡單。

(4)主題介面的設計比較人性化。例如,可以快速查詢檔案直接進行開發,可以通過分屏顯示程式碼,主題顏色可以進行自定義設定(預設是黑色),也可以快速檢視最近開啟的專案檔案並檢視專案檔案結構。

(5)提供了豐富的外掛。VSCode提供了外掛擴充套件功能,使用者根據需要自行下載安裝,只需在安裝配置成功之後,重新啟動編輯器,就可以使用此外掛提供的功能。

2.git-bash命令列工具

在進行Vue開發時,我們經常會使用一些命令,如npm(包管理器)、vue-cli(腳手架),這些命令需要在命令列下使用。git-bash是git(版本管理器)中提供的一個命令列工具,外觀類似於Windows系統內建的cmd命令列工具,但使用者體驗更友好。在實際開發中,經常會使用git-bash工具代替cmd。下面我們就來講解git-bash的安裝步驟。

(1)開啟git for windows官網,下載git安裝包,如圖1-3所示。

(2)雙擊下載後的安裝程式,進行安裝,如圖1-4所示。

(3)單擊“Next”按鈕,根據提示進行安裝,全部使用預設值即可。

(4)安裝成功後,啟動git-bash,如圖1-5所示。

3.Node.js環境

Node.js是一個基於Chrome V8引擎的JavaScript執行環境,它可以讓JavaScript執行在伺服器端。接下來我們就對Node.js的下載和安裝進行詳細講解。

(1)開啟Node.js官方網站,找到Node.js下載地址,如圖1-6所示.

從圖1-6中可以看出,Node.js有兩個版本,LTS(Long Term Support)是提供長期支援的版本,只進行微小的Bug修復且版本穩定,因此有很多使用者在使用;Current是當前釋出的最新版本,增加了一些新特性,有利於進行新技術的開發使用。這裡選擇LTS版本進行下載即可。

(2)雙擊安裝包進行安裝,如圖1-7所示

(3)安裝過程全部使用預設值。安裝完成後,開啟git-bash命令列工具,檢視Node.js版本資訊,如圖1-8所示。

(4)將Node.js安裝完成後,下面我們通過程式碼演示HelloWorld程式的編寫。建立C:\vue\chapter01目錄,在該目錄中建立helloworld.js檔案,編寫如下程式碼:

console.log('Hello World')

(5)儲存檔案後,執行如下命令,啟動Hello World程式:

node hello world.js

(6)上述程式碼執行後,輸出結果如圖1-9所示。

(7)Node.js還提供了互動式環境REPL,類似Chrome瀏覽器的控制檯,可以在命令列中直接輸入JavaScript程式碼來執行。在命令列中執行node命令,即可進入互動模式,如圖1-10所示。

(8)若要從互動模式中退出,可以輸入“.exit”並按Enter鍵,或者按兩次Ctrl+C組合鍵來退出。

4.npm包管理工具

npm(Node.jsPackage Manager)是一個Node.js的包管理工具,用來解決Node.js程式碼部署問題。在安裝Node.js時會自動安裝相應的npm版本,不需要單獨安裝。使用npm包管理工具可以解決如下場景的需求。

(1)從npm伺服器下載別人編寫的第三方包到本地使用。

(2)從npm伺服器下載並安裝別人編寫的命令程式到本地使用。

(3)將自己編寫的包或命令列程式上傳到npm伺服器供別人使用。npm提供了快速操作包的命令,只需要簡單命令就可以很方便地對第三方包進行管理,下面列舉npm中的常用命令。

  • npm install:安裝專案所需要的全部包,需要配置package.json檔案。
  • npm uninstall:解除安裝指定名稱的包。
  • npm install包名:安裝指定名稱的包,後面可以跟引數“-g”表示全域性安裝,“–save”表示本地安裝;
  • npm update:更新指定名稱的包;
  • npm start:專案啟動;通過CDN方式引入Vue,可以緩解伺服器的壓力,加快檔案的下載速度。目前,網路上有很多免費的CDN伺服器可以使用
  • npm run build:專案構建。

多學一招:由於npm的伺服器在國外,使用npm下載軟體包的速度非常慢,為了提高下載速度,推薦讀者切換成國內的映象伺服器來使用。以淘寶NPM映象為例,使用如下命令設定即可切換。

npm config set registry https://registry.npm.taobao.org

5.Chrome瀏覽器和vue-devtools擴充套件

瀏覽器是開發和除錯Web專案的工具,目前市面上主流的瀏覽器都有自己的優點和缺點,本書選擇基於使用量較多的Chrome瀏覽器進行講解。

vue-devtools是一款基於Chrome瀏覽器的擴充套件,用於除錯Vue應用,只需下載官方壓縮包,配置Chrome瀏覽器的擴充套件程式即可使用。下面我們簡單介紹一下安裝流程。

(1)下載vue-devtools-5.1.1.zip壓縮包到本地。

(2)將壓縮包進行解壓,然後在命令列中切換到解壓好的vue-devtools-5.1.1目錄,輸入以下命令進行依賴安裝:

npm install

(3)構建vue-devtools工具外掛,執行命令如下。

npm run build

(4)將外掛新增至chrome瀏覽器。單擊瀏覽器位址列右邊的“”按鈕,在彈出的選單中選擇“更多工具”→“擴充套件程式”,如圖1-11所示。

圖1-11擴充套件程式頁面在圖1-11所示的介面中,單擊“載入已解壓的擴充套件程式”按鈕,此時會彈出選擇框,需要使用者選擇擴充套件程式目錄。找到vue-devtools-5.1.1/shells/chrome目錄,將其新增到擴充套件程式中。

(5)配置完成後,可以看到當前vue-devtools工具的資訊,並在Chrome瀏覽器視窗的右上角會顯示Vue的標識,如圖1-12所示。