vite5+vue3+ts+pinia+vue-router+eslint搭建前端项目

1.创建项目

 yarn crate vite

2.配置vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
    ],
  },
  server: {
    host: true,
    port: 4000,
  },
});

3.集成pinia

1.安装pinia

yarn add pinia

2.在store文件夹下新建index.ts作为pinia根仓库文件

import type { App } from "vue";
import { createPinia } from "pinia";

const store = createPinia();
export function setupStore(app: App<Element>) {
  app.use(store);
}

3.在main.ts中引入

import { createApp } from "vue";
import App from "./App.vue";
import { setupStore } from "./store";

const app = createApp(App);
setupStore(app);
app.mount("#app");

4.在store -> modules下创建xx.ts文件作为子仓库

import { defineStore } from "pinia";

export const useUserStore = defineStore({
  id: "app-user",
  state: () => ({}),
});

4.集成vue-router@4

1.安装

yarn add vue-router@4

2.创建路由router -> index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import type { App } from "vue";
import { basicRoutes } from "./routes";

export const router = createRouter({
  history: createWebHashHistory(),
  routes: basicRoutes,
});

export function setupRouter(app: App<Element>) {
  app.use(router);
}

3.创建静态路由 routes.ts

import { RouteRecordRaw } from "vue-router";

export const basicRoutes: RouteRecordRaw[] = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    meta: {
      title: "登录",
    },
  },
];

4.在main.ts自行引入

4.安装less

yarn add less

5.安装element-plus

1.安装

yarn add element-plus
yarn add unplugin-vue-components unplugin-auto-import -D

• 配置组件按需引入

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
});

6.集成eslint

1.安装eslint

yarn add eslint@8.56.0 eslint-plugin-vue vite-plugin-eslint -D //请勿安装9.0，后续包暂不兼容
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

2.配置文件 同时集成 prettier

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

3.自动检查import和排序

npm i eslint-plugin-prettier eslint-plugin-simple-import-sort -D

4.prettierrc对应配置文件

{
  "printWidth": 100, // 每行代码的最大长度
  "semi": true, //是否在语句末尾添加分号
  "vueIndentScriptAndStyle": true, // 否在 Vue 单文件组件中缩进 <script> 和 <style> 标签中的代码
  "singleQuote": true, // 是否使用单引号
  "trailingComma": "all", // 在对象或数组最后一个元素后面是否添加逗号
  "proseWrap": "never", // 在 Markdown 文本中换行
  "htmlWhitespaceSensitivity": "strict", // 在 Markdown 中换行
  "endOfLine": "auto", // 换行符
  "plugins": ["prettier-plugin-packagejson"] // prettier-plugin-packagejson 排序package.json
}

5.eslint配置

module.exports = {
  root: false, //是否开启 eslint
  env: {
    browser: true, // 浏览器环境中的全局变量。
    node: true, // Node.js 全局变量和 Node.js 作用域。
    es6: true, // 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）
  },
  // 解析器
  parser: 'vue-eslint-parser',
  // 解析器配置
  parserOptions: {
    parser: '@typescript-eslint/parser', // 解析器
    ecmaVersion: 2020, // ECMAScript 版本
    sourceType: 'module', // 模块
    jsxPragma: 'React', // 支持 ReactJSX 语法
    ecmaFeatures: {
      jsx: true, // 启用 JSX
    },
  },
  plugins: ['import', 'simple-import-sort'],
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended', // prettier放在最后,因为 extends 中后引入的规则会覆盖前面的规则。
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'off', // 禁止未使用的变量
    'vue/multi-word-component-names': 'off', // 是否开启组件命名规则校验
    '@typescript-eslint/no-explicit-any': 'off', // 是否使用any,
    '@typescript-eslint/ban-types': 'off', // 禁止特定类型的对象
    '@typescript-eslint/no-var-requires': 'off', //禁止require
    '@typescript-eslint/ban-ts-comment': 'off', //禁止特定类型的 TypeScript 注释
    'vue/require-default-prop': 'off', //props是否必须有默认值
    '@typescript-eslint/no-non-null-assertion': 'off', //禁止使用非空断言操作符
    'no-unused-vars': 'off', // 禁止未使用的变量
    'vue/no-v-html': 'off', // 禁止使用v-html
    'vue/no-template-shadow': 'off', // 禁止模板中变量名与外部作用域中的变量或参数同名
    'vue/attributes-order': 'off', // 强制排序 HTML 属性

    'import/first': 'error', // 强制执行 import 语句位于其他语句之
    'import/newline-after-import': 'error', // 制执行 import 语句后必须有一个空行
    'import/no-duplicates': 'error', // 确保模块导入重复

    'simple-import-sort/imports': 'error',
    'simple-import-sort/exports': 'error',
  },
};