如何用vite快速搭建一个vue3项目

初始化项目

yarn create @vitejs/app
选择vue框架 在选择vue-ts模板

安装eslint

yarn add eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-simple-import-sort -D

新建.eslintrc文件

module.exports = {
	root: true,

	env: {
		node: true
	},

	plugins: ["simple-import-sort"],

	extends: [
		"plugin:vue/vue3-recommended",
		"@vue/typescript/recommended",
		"@vue/prettier",
		"@vue/prettier/@typescript-eslint"
	],

	parserOptions: {
		ecmaVersion: 2020
	},

	rules: {
		"@typescript-eslint/explicit-module-boundary-types": "off",
		"@typescript-eslint/interface-name-prefix": "off",
		"@typescript-eslint/no-empty-function": "off",
		"@typescript-eslint/no-explicit-any": "off",
		"@typescript-eslint/no-var-requires": "off",
		"@typescript-eslint/camelcase": "off",
		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
		"vue/html-self-closing": [
			"error",
			{
				html: {
					component: "always",
					normal: "always",
					void: "any"
				},
				math: "always",
				svg: "always"
			}
		],
		"vue/require-default-prop": "off",
		"vue/no-v-html": "off",

		"sort-imports": "off",
		"import/order": "off",
		"simple-import-sort/imports": "error",
		"simple-import-sort/exports": "error"
	},

	overrides: [
		{
			files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
			env: {
				jest: true
			}
		}
	]
};

安装stylelint

yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order -D
新建.stylelintrc.js

module.exports = {
  defaultSeverity: "error",
  plugins: ["stylelint-prettier"],
  extends: ["stylelint-prettier/recommended", "stylelint-config-recess-order"],
  rules: {}
};

安装prettier

yarn add prettier eslint-plugin-prettier @vue/eslint-config-prettier -D
新建.prettierrc文件

{
  "printWidth": 120,
  "proseWrap": "preserve",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "endOfLine": "lf",
  "insertPragma": false,
  "requirePragma": false,
  "useTabs": true
}

安装commit-message

yarn add @commitlint/cli @commitlint/config-conventional -D
添加.commitlintrc.js文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "release",
        "wip",
        "build",
        "chore",
        "ci",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
        "merge"]
    ]
  }
};

安装husky和lint-staged

yarn add huksy lint-staged -D
修改package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{vue,ts,js,scss}": [
      "prettier --write",
      "git add"
    ]
  }

配置项目中需要的vscode扩展

在项目根目录中执行

mkdir .vscode && cd .vscode
touch extensions.json

将下面内容填写到extensions.json文件中

{
  "recommendations": [
    "shenjiaolong.vue-helper",
    "octref.vetur",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint"
  ]
}