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/

總結

以上是生活随笔為你收集整理的idea2020.2.2怎么创建web项目_创建Vue3.0的项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。