IntelliJ IDEA：Vue.js集成

Vue.js

此功能僅在Ultimate版本中受支持。

IntelliJ IDEA與用于開發(fā)用戶界面和高級單頁面應用程序的Vue.js框架集成。

在開始使用Vue.js框架之前，你需要：

1. 確保已經(jīng)安裝了Node.js。

2. 如“插件管理”中所述， 在“插件”頁面上安裝并激活Vue.js存儲庫插件 。

創(chuàng)建一個新的Vue.js應用程序

創(chuàng)建新的Vue.js應用程序的推薦方法是使用vue-cli，這是一個用于搭建Vue.js應用程序的官方工具。如果使用Vue CLI版本2創(chuàng)建應用程序，則可以選擇6個默認項目模板中的一個 ，然后回答有關在開發(fā)中使用的其他工具（如linters和test runner）的一些問題。

當然，您也可以創(chuàng)建一個空的IntelliJ IDEA項目并在其中安裝Vue.js.

安裝vue-cli包

• 打開內(nèi)置終端（查看|工具窗口|終端）并在命令提示符下鍵入：npm install --global vue-cli。

創(chuàng)建應用程序

1. 在主菜單上選擇：文件|新建|項目，或單擊歡迎屏幕上的“新建項目”按鈕。

2. 在“項目類別和選項”對話框（“新建項目”向?qū)У牡谝豁摚┲?，在左?cè)窗格中選擇“靜態(tài)Web”。

3. 在右側(cè)窗格中，選擇Vue.js，然后單擊“下一步”。

4. 在向?qū)У牡诙撋?，指定項目名稱和要在其中創(chuàng)建的文件夾。在Node Interpreter字段中，指定要使用的Node.js解釋器。從下拉列表中選擇已配置的解釋器，或在vue-cli或@vue/cli字段中選擇“添加”以配置新的解釋器，指定存儲vue-cli或@vue/cli存儲包的文件夾。從“項目模板”列表中，選擇要使用的Vue.js模板。

5. 單擊“完成”后，IntelliJ IDEA會向您詢問有關可添加到項目中的工具（如linters和測試運行器）的其他問題。這些問題取決于您選擇的模板。之后，IntelliJ IDEA生成一個包含所有必需配置文件的Vue.js特定項目。

要下載項目依賴項，請執(zhí)行以下操作之一：

• 打開嵌入式終端（查看|工具窗口|終端，或Alt+F12）并在命令提示符下鍵入：npm install。

• 在項目根目錄中的package.json文件的上下文菜單中選擇：Run'npm install'。

創(chuàng)建一個空的IntelliJ IDEA項目

1. 在主菜單上選擇：文件|新建|項目，或單擊歡迎屏幕上的“新建項目”按鈕。

2. 在“項目類別和選項”對話框（“新建項目”向?qū)У牡谝豁摚┲?，在左?cè)窗格中選擇“靜態(tài)Web”。

3. 在右側(cè)窗格中，選擇“靜態(tài)Web”，然后單擊“下一步”。

4. 在向?qū)У牡诙撋希付椖棵Q和要在其中創(chuàng)建的文件夾。

5. 單擊“完成”后，IntelliJ IDEA將創(chuàng)建并打開一個空項目。

在空項目中安裝Vue.js.

1. 打開您將使用Vue.js的空項目。

2. 打開嵌入式終端（查看|工具窗口|終端，或Alt+F12）并在命令提示符下鍵入：npm install vue。

使用現(xiàn)有的Vue.js應用程序

要繼續(xù)開發(fā)現(xiàn)有的Vue.js應用程序，請在IntelliJ IDEA中打開它并下載所需的依賴項。

打開計算機上已有的應用程序源

• 單擊歡迎屏幕上的“打開”或在在主菜單上選擇：文件|打開。在打開的對話框中，選擇存儲源的文件夾。

從版本控制中檢出應用程序源

1. 單擊“歡迎”屏幕上的“從版本控制中簽出”或從主菜單上選擇：VCS|從版本控制中簽出。

2. 從列表中選擇您的版本控制系統(tǒng)。

3. 在打開的特定于VCS的對話框中，鍵入您的憑據(jù)和存儲庫以檢出應用程序源。

下載依賴項

• 單擊彈出窗口中的：“運行'npm install'”：

  

創(chuàng)建Vue.js組件

IntelliJ IDEA識別.vue文件類型并為Vue.js組件提供專用.vue文件模板。創(chuàng)建步驟如下所示：

• 在“項目”工具窗口中，選擇新組件的父文件夾，然后從列表中選擇“Vue組件”。

  

您還可以從現(xiàn)有組件中提取新的Vue.js組件，而無需任何復制和粘貼，但使用專用的意圖操作或重構(gòu)。新提取的模板中使用的所有數(shù)據(jù)和方法都保留在父組件中。IntelliJ IDEA使用props將它們傳遞給新組件并復制相關樣式。

提取組件

1. 選擇要提取的模板片段并調(diào)用組件提取：

   • 要使用意圖操作，請按Alt+Enter，然后從列表中選擇“提取組件”。

   • 要使用重構(gòu)，請在主菜單上或選擇的上下文菜單中選擇：Refactor|提取|提取Vue組件，。

2. 輸入新組件的名稱。如果此名稱已被使用或無效，則IntelliJ IDEA會顯示警告。否則，將創(chuàng)建一個新的單文件組件并將其導入父組件。
   

   

編碼協(xié)助

在.vue文件中，IntelliJ IDEA識別script，style和template塊。在script和style標簽內(nèi)，IntelliJ IDEA允許您使用TypeScript，Pug和CSS預處理器而不是lang屬性。

默認情況下，您可以獲得ECMAScript 6內(nèi)部的script塊和CSS內(nèi)部的style塊的代碼完成。

在模板中，IntelliJ IDEA自動添加結(jié)束花括號（}）并完成Vue.js指令。

IntelliJ IDEA還為template標簽內(nèi)的Vue組件提供代碼完成（Ctrl+Space）和導航（Ctrl+B）：

代碼完成和定義導航也可用于Vue.js屬性，數(shù)據(jù)對象中的屬性，計算屬性和方法。

使用Vue.js Live模板生成代碼

使用IntelliJ IDEA，您可以使用由Sarah Drasner創(chuàng)建的集合改編的Vue.js的Live模板集合。操作步驟如下：

1. 鍵入模板的縮寫或按Ctrl+J，然后從可用模板列表中選擇它。

2. 要展開模板，請按Tab。

3. 要在模板內(nèi)從一個變量移動到另一個變量，請再按Tab一次。
   

   

用Prettier重新格式化Vue.js代碼

IntelliJ IDEA與Prettier代碼格式化器集成。您可以使用Reformat with Prettier操作重新格式化選定的代碼片段以及整個文件或目錄。一旦您將Prettier作為項目中的依賴項或在您的機器上全局安裝，IntelliJ IDEA就會添加此操作。此外，Prettier配置中的密鑰代碼樣式規(guī)則將應用于IntelliJ IDEA代碼樣式設置。因此，生成的代碼（例如，在重構(gòu)或快速修復之后）和已經(jīng)使用Prettier處理的代碼的格式一致。

使用Prettier重新格式化代碼

• 選擇要在編輯器中重新格式化的代碼片段，或在“項目”工具窗口中選擇文件或文件夾，然后在選擇的上下文菜單中按N/A或選擇“使用Prettier重新格式化”。

• 或者，按Ctrl+Shift+A，然后在“查找操作”彈出列表中單擊“使用Prettier重新格式化”：