vue-cli腳手架搭建vue3.0+typescripe項目


  新開個項目,小項目,小。順手就用vue吧,vue3出來也幾個月了,直接上了吧。一年多沒用vue了,用的時候也得再熟悉,不如直接干3了!

  vue官方推薦使用的腳手架是 Vite 和 vue-cli ,延續vue2時使用的vue-cli進行搭建,順手順眼。集成webpack,熱更新,不用操心其他配置操作,專心項目開發。

  安裝vue-cli就不說了。

 

  

 

 

  描述了vue的很多功能,比如 ......

 

  創建項目,可以使用 vue create app 或者 vue ui 來啟動GUI頁面。 都行..都行...

 

  哦,還是說一下,卸載之前老版本的vue-cli有時候卸載不干凈,重新安裝也用的之前的版本號,我的操作是,手動刪

  npm -g 目錄在 C:\Users\rionz\.nodejs\node_global  所有出現vue的全給刪了

  yarn global 目錄在 C:\Users\rionz\AppData\Local\Yarn\Data\global

  如果在使用vue命令的時候 出現 not found,那么在環境變量里面添加上bin目錄就行了

  

 

  •   vue create

 

  這里 方向鍵 選擇 "手動配置" 回車,注意一下,如果使用 git 的命令行方向鍵會有些問題,要配置一下命令行的設置,自行百度

 

  

 

  我這邊需要用到這些東西,看你們自己項目需求了。 空格鍵選中

 

  

 

   呃...

 

  

 

  這里注意一下,部分開發者可能會喜歡用 Vue Class Component  用Class的方式編寫Component

 

  

 

  看着自己的配就行了,有前端基礎的這幾個字都能懂

  Lint的時候不要選擇lint on commit,據說有坑

  最后一項,說的是是否保存配置(下次直接創建的意思)

 

  

 

   至此,項目搭建完成,vue-cli會自己跑着安裝依賴,創建文件等

 

  •   vue ui

  會在瀏覽器上面起一個GUI頁面,自己看

  

  還是挺好看的,有顏色

 

  •    幾個問題,說一下

 

  項目起來前,可能會有個報錯

  

  大丈夫! 沒有 X 就裝 X 啊

  進入項目文件夾,yarn add vue-template-compiler  就行了 再 yarn serve 就起來了~~

 

  使用tslint,結尾沒有分號,對象最后沒有逗號,單雙引號的問題,都有會warning,看的不舒服想消除的話...

  

 

  如果需要vue自動補全或者不自動補全逗號、分號、引號啥啥啥的,添加.prettierrc.json文件

{
    "singleQuote": true,  
    "semi": true,
    "trailingComma": "none"
}

 

 

 

 


免責聲明!

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



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