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、訪問一下
在瀏覽器裏輸入本地地址就可以啦