1. 檢視Vue的環境版本
Vue -V
如果版本低于4.0，則需要更新Vue的版本
npm install -g @vue/cli
2. 建立Vue 3.0的項目
3. VS Code 的環境配置
安裝Extension：ESLint， Vetur。
VS Code基于ESLint的Auto Save功能，可以很好的格式化代碼，讓代碼更加幹淨整潔，且利于團隊協作。
3.1 VS Code setting.json的配置
{ "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "editor.formatOnSave": true, "eslint.lintTask.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true }, "js-beautify-html": { "wrap_attributes": "auto", "wrap_line_length": 12000, "end_with_newline": false } }, "explorer.confirmDelete": false, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "javascript.format.insertSpaceAfterSemicolonInForStatements": false, "prettier.semi": false, "typescript.format.insertSpaceAfterSemicolonInForStatements": false, "vetur.grammar.customBlocks": { "docs": "md", "i18n": "json" }}
3.2 項目檔案.eslintrc.js的配置
module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', '@vue/standard', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', "comma-dangle": [1, { "objects": "always", "arrays": "ignore", "imports": "ignore", "exports": "ignore", "functions": "ignore" }] }}
3.3 項目檔案package.json需要安裝eslint相關的Dependencies.
{ "name": "gitinfo-dashboard", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-class-component": "^8.0.0-0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-typescript": "^5.0.2", "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^7.0.0-0", "typescript": "~3.9.3" }}
4. 最後，讓項目跑起來
npm installnpm run serve
參考文檔：
1. https://cli.vuejs.org/
2. https://v3.vuejs.org/