新開個項目,小項目,小。順手就用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"
}