使用VueCLI的User Interface Tool(GUI)建立app的圖文講解

(英文原文)

須要安VueCLI3和nodejs。

 

在terminal輸入vue能夠看到命令列表：

其中vue ui [options] 就是用於開始和打開vue-cli ui的命令。

使用http://localhost:8000 端口打開Gui網頁：

點擊右上角？號

顯示一些連接。

如：https://forum.vuejs.org/c/chinese   （發帖子的地方）

 

項目：顯示目前追蹤的項目。

建立，創建一個新的項目。和這個命令vue create <name>同樣。

導入：從一個目錄或遠程倉庫導入一個project。

須要等一會。

而後安裝成功：

嘗試一下各個功能把！沒啥說的越用越熟！

 

任務

 

serve選項

點擊run task,至關於命令yarn serve,啓動服務器。

控制檯是顯示各類狀態

輸出就是顯示和terminal上的信息同樣的log, task process:

分析Analyzer：出現一個分析圖：

建立了一個圖表來顯示你的代碼的各類依賴。

• 紫色部分表明開發者寫的代碼。
• 綠色部分表明從依賴引進的代碼。

 

Build選項

和serve section相似，只是它產生一個production bundle, 這個bundle被用來部署app。 

點擊運行，會等一會，它會編譯和壓縮程序。

最後成功後，給出提示。並能夠在<輸出>tab看信息。

分析tab，有不一樣的分析模式：

 

Lint選項

lint your code and give you an output.

$ vue-cli-service lint
 DONE  No lint errors found!

Total task duration: 15.42s

 

 

test:unit

運行單元測試

 

Inspect

輸出webpack的配置的信息，到json file