安裝 Vue CLI 安裝 npm install -g vue-cli 安裝 npm install -g @vue/cli- 2. 建立專案 vue init webpack staff 3. 設定vue router 4. 前端專案結構 參考 https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC

安裝 Vue CLI 安裝 Vue CLI npm install -g @vue/cli 使用 vue create [專案名稱] 或 vue create . 選擇手動建立專案 (Manually select features) 套件選用 Babel、Vuex、CSS Pre-processors Vue版本，選擇2 Vue-Router為了讓在網址上會多出#，輸入n 選擇Sass/SCSS 存檔在 package.json 不要儲存相關設定 安裝完成 參考 https://hsuchihting.github.io/vue-js/20200404/497821688/

Prettier - Code formatter Vue - Official { "prettier.useEditorConfig": false "prettier.printWidth": 200, // 超過 XX 個字元就換行 "prettier.tabWidth": 4, // 程式碼縮排 4 個空格 "prettier.useTabs": false, // 不使用 tab，預設使用空格 "prettier.semi": true, // 語句結尾加上分號 "prettier.singleQuote": false, // 使用單引號，預設使用雙引號 "prettier.quoteProps": "as-needed", // 預設 'as-needed'，只有在屬性名稱包含特殊字元或空格時才會使用雙引號。否則，它將使用單引號。 "prettier.trailingComma": "es5", // 在物件或陣列最後一個元素後面加上逗號 "prettier.bracketSpacing": true, // 在物件的左右括號間加上空格 "prettier.arrowParens": "always", // 箭頭函式只有一個參數時，也需要括號 "prettier.endOfLine": "lf", // 換行符號，預設 lf "prettier.proseWrap": "preserve", // 是否要换行 "prettier.bracketSameLine": true, //結束標籤>不換行 "prettier.htmlWhitespaceSensitivity": "ignore", //ignore的話就是所有元素間的空格都會被忽略 "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.