从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier

首先，确保你已经安装了Node.js和npm。

1. 使用Vue CLI创建Vue 3项目：

npm init vue@latest

按照提示进行操作，选择Vite作为构建工具，并选择Vue 3。

2. 安装Element Plus：

npm install element-plus --save

3. 安装ESLint和相关插件：

npm install eslint eslint-plugin-vue eslint-plugin-import eslint-plugin-node eslint-config-prettier eslint-plugin-prettier --save-dev

4. 安装Prettier并创建.prettierrc配置文件：

npm install prettier --save-dev

.prettierrc:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

5. 在项目根目录下创建.eslintrc.js配置文件：

.eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

6. 在vite.config.js中配置lintOnSave：

vite.config.js:

export default defineConfig({
  plugins: [vue()],
  lintOnSave: process.env.NODE_ENV !== 'production',
});

这样，你就拥有了一个配置了Element Plus、ESLint和Prettier的Vue 3 + Vite项目。