vue-cli4.0安裝及應用生成

vue腳手架4.0在2019年10月16日(據說)正式發(fā)布,臥槽無情,因為我甚至還不知道3.0長什么樣子~~~~~~~~~~~~~~~~~~~~~~

如果我們以前在自己電腦中安裝過vue-cli首先你需要將它卸載

npm uninstall vue-cli -g

安裝vue-cli4.0版本,有條件可以配置下cnpm,這樣下載快點,用yarn也中

npm install @vue/cli -g

mac安裝和卸載,如果你沒有設置過,需要加sudo

sudo npm install @vue/cli -g

安裝完成后,輸入vue --version,我就手打了,插圖還要我去截圖

vue --version
// 終端輸出:@vue/cli 4.0.5  就ok了

創(chuàng)建項目,windows和mac無差別,記住下面這句命令,但是千萬先別執(zhí)行,往下看

// vueapp就是你的項目名稱,建議不要用中文,不要用駝峰出現大寫,用中劃線或者下劃線也可以
vue create vueapp

這里我們需要注意一個嚴重的問題就是生成應用的時候對于安裝選項的選擇,在vuecli3.0之后,改成了通過上下鍵和空格鍵來選擇和確認安裝項了,mac直接忽略下面這一段廢話,直接看選項選擇即可,windows需要注意,貼圖-.-

20191105163915.png

上面,我們用的是windows下的git終端來進行操作,發(fā)現上下鍵并沒有什么L用,更不用提空格來選擇了,因此我們可以用windows自帶的powershell在要創(chuàng)建應用的文件夾中,按住shift+鼠標右鍵就會出現在此處打開powershell窗口或者在此處打開命令窗口,然后移動鼠標點擊打開,或者通過窗口鍵+R鍵輸入cmd,打開終端也行,使用d:或者e:或者c:這種磁盤名稱加冒號的形式就可以切換磁盤位置,看下圖powershell終端創(chuàng)建

20191105165548.png

使用powershell來創(chuàng)建應用,這時候,我們會發(fā)現上下鍵是可用的,直接可進行選擇,我們這一步選擇第二項,第二項是進行手動選擇功能,然后回車進入下一步

20191105170611.png

選擇安裝項,通過上下鍵來選擇,通過空格鍵來確認,我選擇了上圖這些我需要用到的,然后回車,下面是對選項的一個解釋,

1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
2 >( ) Babel //轉碼器,可以將ES6代碼轉為ES5代碼,從而在現有環(huán)境執(zhí)行。 
3  ( ) TypeScript// TypeScript是一個JavaScript(后綴.js)的超集(后綴.ts)包含并擴展了 JavaScript 的語法,需要被編譯輸出為 JavaScript在瀏覽器運行,目前較少人再用
4  ( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
5  ( ) Router // vue-router(vue路由)
6  ( ) Vuex // vuex(vue的狀態(tài)管理模式)
7  ( ) CSS Pre-processors // CSS 預處理器(如:less、sass)
8  ( ) Linter / Formatter // 代碼風格檢查和格式化(如:ESlint)
9  ( ) Unit Testing // 單元測試(unit tests)10 ( ) E2E Testing // e2e(end to end) 測試

到這一步基本快完成了,選擇你用的css預編譯器,如何存放配置,是否確認本次配置等等,這些英文看不懂查下就行,或者看心情來,該yes的就y該no的就n,看不懂的就回車,如下圖

20191105172048.png

項目生成及依賴下載中

1.png

依賴下載完成,按照提示運行項目

20191105184141.png

到這里,使用vue-cli4.0就完成了一個應用的生成了,目錄文件和之前版本有所差別,但是不是特別大,如果要做跨域代理,或者webpack的一些配置,可以在根目錄創(chuàng)建一個vue.config.js進行配置!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容