vue-cli3安裝過程


作為一個本來是java開發的搬運工,在公司前端人員缺乏的時候,就直接頂上來開發前台頁面了(話說我已經很久很久沒寫java代碼了(;′⌒`))

好吧言歸正傳,剛開始弄前台就是vue,vue2還沒弄熟,老板說vue-cli3出來了,你要不用最新的吧,下面就是踩過的坑

-------------------------------------------第一步-------------------------------------------

首先vue-cli3對node版本要求比較高,需要8.9以上的(我的正好是8.9.3,所以沒去弄node了省事了)

不過你也可以用nvm去管理node這樣比較方便點,隨時切換版本

關於舊版本vue-cli已經改成了@vue/cli

如果你已經全局安裝了舊版本,你需要先卸載一下

命令是:npm uninstall vue-cli -g

然后安裝新包

命令是:npm install @vue-cli -g

安裝后:vue -V  查看一下版本,檢查一下你是否安裝成功

-------------------------------------------第二步-------------------------------------------

就是創建項目了,vue3搞了兩種方式創建項目,一種是和以前一樣的命令,還有就是在瀏覽器里一圖形化創建

命令創建:vue create hello-word

圖像化創建:vue ui  這個時候瀏覽器就會打開一個窗口

我用的命令創建

1選: Manually select features

2選:(空格鍵是選擇/取消 要裝的東西,上下鍵滑動)回車確定下一步

 

3選:選擇n

 

4選:你也可以選擇less,看個人需求吧

5選:這里選的ESLint+Prettier

6選:Lint on save

7選:

8選:是否保存這次安裝記錄作為下次安裝

這里之后就開始安裝中了......

------------------------------第三步---------------------------------

裝好之后,命令切到hello-world項目目錄下

運行命令:npm run serve

@vue/cli3搭建的新項目,沒有vue-cli2 的build和config文件夾
所以有什么配置可以在根目錄新建一個vue.config.js寫上配置項
這里是修改接口和關閉eslint檢查
module.exports = {
    lintOnSave: false,
    devServer: {
         port: 8081
    }
}

-------------------------------------------------------------------

可能裝的過程沒那么順利,建議先以管理員身份打開命令行

當我安裝國際化i18n時報了個錯

npm install 報錯sill pacote range manifest for hmac-drbg@^1.0.0 fetched
使用 https://registry.npmjs.org/ 也報錯
使用 npm config set registry http://registry.cnpmjs.org/后就不報錯了。

npm install --registry=https://registry.npm.taobao.org

-------------------------------------------------------

補充-----還有vue3在創建項目里中報這個錯:

 ERROR  command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di

我搜了很多最終用下面這個方法解決了

打開這個文件

這個值開始是true,改成false再重新創建項目就ok了

親測有效!!!!!!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM