一步步打造最新前端框架组合 —— vite+vue3+pinia+vue-router@4+setup+ts

本文将会结合自己搭建经验一步一步展开，记录最新vue前端框架如何搭建。

1、安装vite

全局安装

npm init vite@latest

2、使用vite创建vue3工程

npm init @vitejs/app 

第一步：工程文件名

第二步：选择框架

第三步：选择vue-ts组合

第四步：进入项目文件夹，安装依赖即可

3、配置eslint、prettier、编辑器

首先安装相关依赖，如下：

npm i prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

项目根目录新建.eslintrc.json，内容如下：

{
    "root": true,
    "env": {
      "es2021": true,
      "node": true,
      "browser": true
    },
    "globals": {
      "node": true
    },
    "extends": [
      //    "plugin:vue/essential",
      /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
      //    "plugin:@typescript-eslint/recommended",
      //    "eslint:recommended",
      "plugin:vue/vue3-recommended",
      /**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */
      "plugin:prettier/recommended"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": ["@typescript-eslint"],
    "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
    "rules": {
      "@typescript-eslint/no-unused-vars": "error",
      "@typescript-eslint/no-var-requires": "off",
      "@typescript-eslint/consistent-type-imports": "error",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "vue/singleline-html-element-content-newline": "off",
      "vue/multiline-html-element-content-newline": "off",
      "vue/no-v-html": "off",
  
      //    "space-before-blocks": "warn",
      //    "space-before-function-paren": "error",
      //    "space-in-parens": "warn",
      //    "no-whitespace-before-property": "off",
      /**
       * Having a semicolon helps the optimizer interpret your code correctly.
       * This avoids rare errors in optimized code.
       * @see https://twitter.com/alex_kozack/status/1364210394328408066
       */
      "semi": ["error", "always"],
      /**
       * This will make the history of changes in the hit a little cleaner
       */
      //    "comma-dangle": ["warn", "always-multiline"],
      /**
       * Just for beauty
       */
      "quotes": ["warn", "single"] 
    }
  }