隨着時間的推演,vue3官方文檔正式上線,忙里偷閑准備做一個使用vue3的小項目。
首先,我們要全局安裝最新的vue-cli,建議安裝過舊版本的小伙伴,卸載掉舊版本,
安裝最新的腳手架,我們使用vue -V回車查看版本。
版本過低使用npm uninstall vue-cli -g全局卸載腳手架;
然后再全局安裝安裝腳手架npm install -g @vue/cli
安裝完成后,使用vue -V 查看是否為最新版本
接下來我們創建vue項目,使用vue create myproject(項目名);我們也可以使用yarn來進行安裝,推薦使用npm進行安裝。
安裝事項:這里是詢問我們使用哪個模板進行安裝,我們選擇自定義安裝的方法
選擇自定義方法是移動到選擇項,按空格即可選擇。
這里我只選擇了TypeScript語法,可根據自己的需要進行選擇。
() Choose Vue version 選擇Vue版本
() Babel JavaScript 的編譯器
(*)TypeScript TypeScript語法
( )Progressive Web App (PWA) Support 先進的Web應用程序(PWA)支持
( )Router 路由
( )Vuex 狀態管理
( )CSS Pre-processors CSS預處理程序
( )Linter / Formatter 格式化程序
( )Unit Testing 單元測試
( )E2E Testing E2E測試
接下來會讓我們選擇一個你想要的vue版本,選擇vue3.x的項目版本。
使用類樣式的組件語法。
是否選擇使用我們TypeScript和Babel編譯我們的jsx,這里選擇No
然后選擇我們的代碼規范,一般來說我們選擇的是ESLint + Prettier來統一前端代碼風格。
這里我選擇的是ESLint with error prevention only不加規范的,哈哈,這是一個缺點哈,大家不要學習!
在我們保存時進行代碼設置,我們直接回車
把我們設置好的配置單獨寫一個文件還是寫入我們的package.json文件中,可以根據自己的需要進行選擇。
詢問是否保存我們剛才的設置,方便下一次創建使用,我們不需要的話選擇No
如果你同時安裝了yarn和npm,它會詢問選擇一個方式下載構建,這里我選擇的是yarn,因為我覺得yarn方式更好一點
1.yarn安裝依賴不會存在丟包問題,npm偶爾丟包;
2.yarn在安裝依賴的時候會進行緩存,而npm則不會。例如在安裝依賴的時候因網絡原因或者誤操作將IDE工具關閉等等,
在下一次安裝的時候,yarn會從之前已經下載好的地方繼續下載,而npm和cnpm則會將之前的刪除重新下載。
下載創建完成以后,我們接下來將命令移動到剛剛創建的項目中 cd myproject,然后使用yarn serve就可以運行我們創建好的項目了。
接下來我們訪問本地地址就好啦