## 一、概述 介紹前開發的主要環境搭建； ## 二、基礎安裝 ### **NodeJS和vueJS** 安裝NodeJS以及vuejs環境； 參考： [NodeJS安裝](../../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/Node.js/%E5%AE%89%E8%A3%85.md) [vuecli安裝](../../../%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/vueCli/%E5%AE%89%E8%A3%85.md) ### **VSCode** 下載解壓即可； 必須安裝的插件，Vetur插件和Prettier+（注意不是Prettier）插件； #### **VSCode配置** ``` { "files.autoSave": "onFocusChange", "editor.defaultFormatter": "svipas.prettier-plus", "editor.formatOnSave": true, "prettier.arrowParens": "always", "prettier.semi": true, "prettier.tabWidth": 2, "prettier.useTabs": false, "prettier.vueIndentScriptAndStyle": false, "prettier.bracketSpacing": true, "prettier.printWidth": 360, "prettier.singleQuote": true, "prettier.jsxSingleQuote": true, "prettier.trailingComma": "all", "[vue]": { "editor.defaultFormatter": "octref.vetur" ? } } ``` 可以在當前工程目錄下建立一個`.vscode`子目錄，并把上述內容復制到文件`settings.json`中，即可隨工程發布進入版本控制；  >[danger] 特別注意，建議僅保留項目的`settings.json`，不要或者清空用戶級的`settings.json`，因為可能會因為沖突，導致效果不彰； #### **Prettier配置** 在任何一個工程的根目錄下面，確保有`.prettierrc`配置，內容如下： ``` { "arrowParens": "always", "semi": true, "tabWidth": 2, "useTabs": false, "vueIndentScriptAndStyle": false, "bracketSpacing": true, "bracketSameLine": true, "printWidth": 360, "singleQuote": true, "jsxSingleQuote": true, "trailingComma": "all" } ```  #### **實踐效果** 經過上述設置后，保存代碼的時候，直接就按照上述要求格式化了，確保了代碼風格的一致性； ### **GIT** 安裝GIT程序，配置GitHub賬戶； [GIT](../../../%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/git.md) [GitHub](../../../%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/github.md)