天天看點

VUE CLI 3.0 安裝及建立項目

一、安裝

VUE CLI 3.0 官網: https://cli.vuejs.org/   詳細資料可以自己先把官網過一遍。

1. 安裝(預設你的電腦上已安裝node及npm)

npm install -g @vue/cli      

 2. 檢查版本

vue --version      

二、建立項目 (用的cmd工具)

1. 利用 cd 指令進入到指定目錄,即你的項目想放在哪個地方就進入到哪個目錄裡面

2. 建立項目,通過指令: vue create projectname    (說明: projectname 為你的項目名稱,必須小寫字母)

3. 選擇項目配置,配置會有3個選項:

  a. 常用預設 normal-preset

  b. 預設 default

  c. 手動選擇 manually select features

根據自己的個人情況進行選擇,我通常選擇的 normal-preset。接下來就是自動安裝,安裝成功後會提示你進入到項目目錄,并運作程式,如下:

VUE CLI 3.0 安裝及建立項目

到此項目就建立完了,進入到項目目錄後,可以通過 npm run serve 運作看下,效果如下圖:

VUE CLI 3.0 安裝及建立項目

編譯成功後,在浏覽器輸入 http://localhost:8080/  檢視效果

VUE CLI 3.0 安裝及建立項目

三、建立後的目錄結構如下(用的vscode編輯器)

VUE CLI 3.0 安裝及建立項目