idea2020.2.2怎么创建web项目_创建Vue3.0的项目

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/