Vue.js 環境建置 - Vue CLI

2022/06/21閱讀時間約 3 分鐘
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。
  • 需先確認OS有安裝node.js,以下提供我的node與npm版本:
  • 安裝Vue CLI:
$ npm install -g @vue/cli
  • 使用Vue CLI建立專案:
$ vue create ${project_name}

Please pick a preset

選擇相關套件配置,這邊選擇手動選擇:

Check the features needed for your project

這邊我是多選擇了Router,視需求自行增減即可:

Choose a version of Vue.js that you want to start the project with

接著,選擇Vue.js版本,這邊我選擇3.x:

Use history mode for router?

這邊是要設定路由,y 表示選擇用HTML5的history API(history.pushState)來管理路由,URL可能會是這種:
- https://example.com/home
- https://example.com/about
若選擇n,則是會用URL+hash(#)的方式,一般會建議用history的方式,因為對SEO較友善。

Pick a linter / formatter config:

這邊選擇ESLint + Prettier
  • ESLint 是檢查 Coding Style 的工具,Prettier 是程式碼格式化工具,VSCode 預設可使用 Alt + Shift + F 格式化程式碼。

Pick additional lint features

選擇檢查程式碼的時機
存檔時檢查與commit時檢查,這邊選擇存檔時檢查。

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

相關設定的套件要放在哪
可以選擇將設定檔都放package.json統一管理,或者設定檔各自獨立。

Save this as a preset for future projects?

是否保存這些配置,未來其他專案可以直接套用。
我這邊是選N。
接著就會開始安裝相關套件了:
打開VSCode,直接從package.json點debug serve,在http://localhost:8080/即可看到畫面:
等同於直接下:
$ npm run serve

最後,建議裝一下VSCode套件Vetur,將vue語法highlight。

關閉ESLint檢查
在vue.config.js加入這行:
lintOnSave: false
重啟VSCode即可。
為什麼會看到廣告
20會員
161內容數
留言0
查看全部
發表第一個留言支持創作者!