Vue-cli3 安裝及快速創建項目 非常詳細

Vue-cil是Vue的腳手架工具,可以幫助我們編寫基礎的代碼,可以幫我們搞定目錄結構、本地調試、代碼部署、熱加載、單元測試等工作

Vue-cli官網https://cli.vuejs.org/zh/

開始安裝
 

1、先裝node

Vue-cli是一個node包,首先要先裝node.js,對版本也有些要求  (node.js具體流程安裝看這裏)

 

2、安裝Vue-cli 3

裝好node後,在命令行下輸入 

npm install -g vue-cli

回車,如圖,這就是正在安裝了,需要稍等一會

 

3、創建一個項目

在命令行下輸入  vue create 項目名 ,

vue create hello world

注意,vue create只有3.0以上的版本纔可以使用,如果你的版本是低於3.0請先更新Vue-cli (如何更新看這裏

 

3.1、輸入完命令後,如下圖,它會讓你去選擇一個預設:

第一個是默認的,選了bable,eslint

第二個是手動選擇,這裏我是選了手動選擇

 

3.2、選了手動選擇,就會給你更多特性供你選擇,如下圖

上下鍵可以切換,這裏我多選一個CSS

 

3.4、這時它會問人預處理器有什麼,這裏我選的Stylus

 

4.5、下面是讓你選擇ESLint規則,這裏我選的ESLint + Standard config

 

4.6、這是問你是在保存文件時lint 還是提交的時候 ,這裏我選的保存文件

 

4.7、這裏問你bable,postCss,ESLint,這些是放在配置文件中,還是放在package.json裏,這裏我選的相應的文件裏

 

4.8、然後會問你上面的那些預設是否要保存,這裏我選的不保存

忘了截圖了,就是一句Save this as a preset for future projects(y/n)

保存:下次創建項目還是用這個預設

不保存:如果選擇手機還要重新設置一遍

 

4.9、自動添加依賴

 

4.10 、安裝好了

 

4.11、進入目錄,開始編譯 (就是圖裏那兩行藍色的命令)

先執行第一個進入目錄,再執行第二個編譯,如下圖

 

 

4.12、編譯成功啦

 

5、訪問一下

在瀏覽器裏輸入本地地址就可以啦

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章