建立一個vue3的新專案與設定

vue3 也出一陣子了,前陣子一直躍躍欲試,可是又怕新東西不熟,有時間限制的案子我還是不太敢直接使用 vue3,所以這邊閒閒做了一個單頁的 csv 轉換器,大家可以點這裡看看,右上角的 github 也有原始碼。

上禮拜剛接了一個時間比較沒壓力的案子,所以就想說來用用看 vue3,當然這是有點像賭博,因為 vue3 很新,網路上資源有可能不是這麼多,遇到問題你可能查到的都是 vue2 的。

反正想突破自己的這股衝動實在是讓我每天睡不著,所以這邊就想紀錄一下起 vue3 專案的每一個步驟,有錯誤的地方還請留言提醒我一下:D

 

創建專案

$ vue create my-vue3-demo

我們選Manually,這樣他會幫你把很多東西都先裝好。

如果選Default的話,常用的套件都要自己手動安裝,像是routervuexsass之類的。

再不寫就要忘了-vue3

接著馬上就出現了超多選項,請別嚇壞,每個選項都是你認識的東西,一步一步選起來就好。

把自己會用到的東西按空白鍵選起,上下鍵可以選擇項目。

  • Choose Vue version:要選,下一步我們要手動選擇Vue3版本。
  • Babel:要選。
  • Router:如果你是像我之前那樣只有一頁的網站,那就不用,但一般狀況網頁都會超過一頁以上。
  • Vuex:大型專案都會建議要選,資料集中管理的套件。
  • CSS Pre-processors:應該幾乎沒有人在寫純的css了吧,就選起來唄~下一步會讓你選是要用哪種預編譯。
  • Linter/Formater:要選,讓你的程式碼漂亮排版、自動提醒語法錯誤,現在專案都是必用的了。
再不寫就要忘了-vue3

按下Enter之後,就會針對你剛剛的項目詢問更細項的設定。

 

Choose a version of Vue.js

因為本篇就是要介紹vue3,所以就選3吧!

再不寫就要忘了-vue3

 

Use history mode for router ?

Y,這樣之後切換頁面,網址列就不會有#字號

再不寫就要忘了-vue3

 

Pick a CSS pre-processor

選擇你要使用的 css 預處理器,我都是習慣用scss

如果你是網頁新手,還沒有寫過scss之類的東西,你這邊一樣可以選scss,然後照樣寫你的css,以後學會scss再慢慢改過去就好。

再不寫就要忘了-vue3

 

Pick a linter / formatter config

我這邊都是比較常用 EsLint + Prettier,原因就是身邊的同事都這樣用,所以如果還不熟悉這些東西,就跟我選一樣的吧。

  • ESLint:可以檢查你的語法是否有錯誤,可以設定你要多嚴格的規則,多人合作的時候ESLint實在是太重要了。
  • Prettier:可以自動化排版你的程式碼,有時候你多一個縮排之類的,他都可以自動幫你對齊。
再不寫就要忘了-vue3

 

Pick additional lint features

選擇你要在什麼情況下自動修復、排版你的程式碼。

我通常選Lint on save,就是當你存擋的時候就會馬上看到整齊漂亮的程式碼,開發時候要隨時保持程式碼的整潔,開發速度才會快。

再不寫就要忘了-vue3

 

Where do you prefer placing config for Babel, Eslint, etc.?

我們使用的那些套件像是Babel、Eslint等,都可以自己設定一些參數,這些參數要各自獨立出來一個檔案,還是要都放在package.json這隻檔案裡面?

我通常會選各自獨立(In dedicated config files),因為當你的設定一多或是專案越大,你安裝的套件就會變很多,package.json這隻檔案就會變得很長,要找到你要改的地方比較困難。

再不寫就要忘了-vue3

 

Save this as a preset for future projacts?

因為我們剛剛設定了一大堆選項,所以他會問你要不要把設些選項記錄起來,下次創專案的時候就可以套用這些設定。

 都選完了他就會開始建立專案, 完成後會告訴你如何啟動專案。

試著跑起來看看有沒有出現畫面囉!

$ cd my-vue30demo
$ yarn serve

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

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

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。