Vue-cli4的安裝

如果不用vue-cli的模版,如何搭建運行環(huán)境

????1. 安裝依賴:npm install 或者 cnpm install

????2. 初始化: npm init -f 或者 cnpm init -f

????3. 安裝組件/包, 并查看安裝后的內(nèi)容

之前的文章有寫到,用webpack模版方式創(chuàng)建,而這里是沒有用webpack的方式創(chuàng)建

webpack:npm init webpack -f

手動創(chuàng)建:npm init -f

-f參數(shù)就是創(chuàng)建過程中全部采用默認(rèn)方式,不用回答(人工干預(yù))工程名之類的問題

npm install 會產(chǎn)生一個package-lock.json文件,記錄組件/包的安裝時間和版本的內(nèi)容

npm init -f 會產(chǎn)生package.json文件,見下圖

package.json文件

安裝vue-router組件

npm i vue-router --save-dev 等同于 npm i vue-router -D


安裝組件vue-router之后的json文件

圖中,紅線部分就是新增的內(nèi)容

同理,安裝其他組件,如eslint可以通過同樣的命令執(zhí)行 npm i eslint -D

然而,全部手動創(chuàng)建可能會出現(xiàn)遺漏等問題,所以一般都會選擇用webpack模版的方式進(jìn)行創(chuàng)建;通過手工的方式進(jìn)行某一個組件或包的安裝或卸載

vue-cli4安裝/升級

卸載vue-cli2

npm uninstall vue-cli -g ????(-g 全局卸載)

安裝vue-cli4

npm install -g @vue/cli

安裝版本2還是版本3或4由命令最后的關(guān)鍵字來區(qū)分,2是vue-cli,而3和4是@vue/cli

執(zhí)行安裝命令,顯示了一段警告和錯誤


錯誤提示

可能是沒給權(quán)限,我試過加sudo,也試過命令后面加--unsafe-perm 參數(shù),但是這段錯誤提示一直沒有消失

后來,我先執(zhí)行了npm init -y,一鍵初始化項目,然后再次執(zhí)行全局安裝命令,這段錯誤提示反倒消失了,我也不知道為啥

-y 參數(shù):yes的意思,在init的時候省去了敲回車的步驟,生成的默認(rèn)的package.json

使用命令vue -V查看版本號,如果顯示版本號,證明安裝成功


版本號查看

繼續(xù)下一步學(xué)習(xí)

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容