VUE3.0 搭建

更新Vue CLI

//解除安裝
npm uninstall -g vue-cli
//安裝 目前版本4.5.4
npm install -g @vue/cli

建立應用

vue create vue3.0

選項

Default ([Vue 2] babel, eslint)   　　　　　　　　　　　　　　　  //vue2版本預設
Default (Vue 3 Preview) ([Vue 3] babel, eslint)  　　　　  　 //vue3版本預設 
Manually select features   　　　　　　　　　　　　　　　　　　　　//選擇自定義建立

  ◉ Choose Vue version                                //選擇版本
 ◉ Babel                                             //Babel
 ◯ TypeScript                                        //ts使用
 ◯ Progressive Web App (PWA) Support       　　　　　　//建立為web應用
 ◯ Router                                            //建立Router
 ◯ Vuex                                              //建立vuex
 ◯ CSS Pre-processors                                //使用css前處理器
 ◉ Linter / Formatter                                //選擇規範型別
 ◯ Unit Testing                                      //選擇Unit測試方式
 ◯ E2E Testing                                       //選擇E2E測試方式
//我這個只選擇了TS VUEX CSS ROUTER
//版本選擇 3.x

• Use class-style component syntax? 是否使用class-style？ 這個我其他文章有介紹
• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 是否使用JSX格式？ 如果有需要就使用，我就不用了
• Use history mode for router?對路由器使用歷史記錄模式麼？ 官方文件有描述history模式，我僅做練習，不使用。
• CSS預處理我選擇Less，這個看個人。
• 然後是幾種ES檢查模式，我選擇ESLint with error prevention only。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
 ◉ Lint on save    　　　　　　　　　　//儲存就檢測
❯◯ Lint and fix on commit　　　　　　 //fix和commit的時候檢測　　

目錄結構