vite creates a standard vue3+ts+pinia project

yarn create vite my-vue-app --template vue-ts

import path from 'path' // @types/node needs to be installed and configure "allowSyntheticDefaultImports" in compilerOptions: trueimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
function _resolve(dir) {
  return (__dirname, dir);
}
// /config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host: '0.0.0.0', // Listen to all local IPs    port: 3010 // Project port  },
  resolve:{
    alias:{
      '@': _resolve('src') // Alias    }
  }
})

yarn add pinia

import { createApp } from 'vue'
import App from './'
import { createPinia } from 'pinia' // Import pinia
const app = createApp(App)
(createPinia()) // Register pinia
('#app')

// ./src/stores/

import { defineStore } from 'pinia',

const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0
  })
})

​

// Used in setup
import { useCounterStore } from '../stores/counterStore'

export default {
  setup() {
    const counterStore = useCounterStore()

    return { counterStore }
  },
  computed: {
    tripleCounter() {
      return  * 3
    },
  },
}

yarn add vue-router

// src/router/
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: '/login', // Browser access address    name: 'Login',
    component: () => import(/* webpackChunkName: "login"*/ new URL('../pages/Login/', ).href ),
    mate:{}
  }
]

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

export default router

// 
import router from './router'

(router)

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

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    // Automatically import API method    AutoImport({
      imports: [  // Automatically import API configuration        'vue', 
        'vue-router',
        'pinia',
      ],
      resolvers: [], // custom resolvers
      dts: 'src/typings/', // Import storage address    }),
    // Automatically import components    Components({
      resolvers: [], // custom resolvers
      dts: 'src/typings/',
    }),
  ]
})

yarn add element-plus

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

// 

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: [
    // Automatically import Element Plus related functions, such as: ElMessage, ElMessageBox... (with style)    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // Automatically import Element Plus components    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

// Installation packageyarn add @element-plus/icons-vue

// Automatically import any icon collection from Iconify using unplugin-icons and unplugin-auto-importyarn add unplugin-auto-import unplugin-icons -D

// 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// Automatically import element iconimport Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Inspect from 'vite-plugin-inspect'
const path = require('path');
function _resolve(dir) {
  return (__dirname, dir);
}
// /config/
export default defineConfig({
  plugins: [
    vue(),
    // Automatically import Element Plus related functions, such as: ElMessage, ElMessageBox... (with style)    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // Automatically import icon components        IconsResolver({
          prefix: 'Icon',
        }),
        
      ],
      dts: (_resolve('src'), ''),
    }),
    // Automatically import Element Plus components    Components({
      resolvers: [
        // Automatically register icon component        IconsResolver({
          enabledCollections: ['ep'],
        }),
        ElementPlusResolver()],
    }),
    Icons({
      autoInstall: true, // Whether it is automatically loaded    }),
    Inspect(),
  ],
  server:{
    host: '0.0.0.0', // Listen to all local IPs    port: 3010 // Project port  },
  resolve:{
    alias:{
      '@': _resolve('src') // Alias    }
  }
})

<template>
    <i-ep-add-location />
    <IEpRefresh />
</template>

yarn add sass sass-loader -D

// 
export default {
  css:{
    preprocessorOptions: {
      scss: {
        additionalData: "@import './src/assets/css/';",
      },
    },
  }
}

// Install prettier---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

// Install eslint--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------yarn add eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

// .

 = {
  // Set forced single quotes  singleQuote: true,
  autoFix: false,
  printWidth: 140,
  semi: false,
  trailingComma: "none",
  arrowParens: "avoid",
  endOfLine: "LF",
};

// .

 = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "airbnb-base",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "vue/no-multiple-template-root": "off", // Turn off multiple root nodes to check vue3 to use multiple root nodes    quotes: ["error", "single"], // The quote rule is: "single quote", otherwise you will be treated as "error" (you can also change it to warn and try it)  },
};