首先你完成了如下：
Vite+vue3+Ts+pinia实战（一：初始、基础安装、踩坑）

初始目录：

image.png

一、先装路由、pinia、UI库

npm install vue-router@4
npm install pinia
npm install element-plus --save

此时package.json

{
  "name": "cq-function",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.2.10",
    "pinia": "^2.0.16",
    "vue": "^3.2.37",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4"
  }
}

二、新建并使用router、store、UI库

2.1 在src目录下新建router\index.ts如下：

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            //  路由懒加载
            component: () => import("../components/HelloWorld.vue"),
        },
    ],
});
export default router;

2.2 在src目录下新建store\index.ts如下：

// store/index.ts
import { defineStore } from "pinia";
// defineStore(key,options) 必须传递一个唯一key作为标识
export const useCounterStore = defineStore("counterStore", {
    state: () => ({
        counter: 0,
    }),
    actions: {
        // 方法 可以是异步 async addCounter(){}
        // 在这里也可以访问其他的store
        addCounter() {
            this.counter++;
        },
    },
    getters: {
        doubleCounter(state): number {
            // 可以使用this
            // return this.counter * 2
            // 在这里也可以访问其他的store
            return state.counter * 2;
        },
    },
});

2.3 修改App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
    <div>
        <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
    </div>
    <router-view />
</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

2.4 修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入饿了么UI库以及对应的样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入路由模块
import router from './router'
// 引入Store
import { createPinia } from 'pinia'
// 链式编程.use(router).use(createPinia()).use(ElementPlus)
createApp(App).use(router).use(createPinia()).use(ElementPlus).mount('#app')

2.5 修改HelloWorld.vue

<template>
    <h1>HelloWorld</h1>
    <h3>counter:{{ counter }}</h3>
    <h3>doubleCounter:{{ doubleCounter }}</h3>
    <el-button @click="addCounter">counter++</el-button>
    <br />
    <el-button @click="replaceStore">替换state状态值</el-button>
</template>

<script setup lang='ts'>
import { storeToRefs } from "pinia";
import { useCounterStore } from "../store";
const counterStore = useCounterStore();
// 第一次改变store状态 $path对象形式
// const addCounter = () => {
//   counterStore.$patch({
//     counter: counterStore.counter + 1
//   })
// }
// 第二种修改store状态 $path 传递回调函数 第一个参数就是state
// const addCounter = () => {
//   counterStore.$patch((store) => {
//     store.counter++
//   })
// }
// 第三种修改store状态 直接通过store修改
// const addCounter = () => {
//   counterStore.counter++
// }
// 第四种修改store状态
const addCounter = () => {
    counterStore.addCounter();
};

// 访问state的状态两个方法
// !不能这样使用 因为丢掉了响应式
// const { counter, doubleCounter } = counterStore

// 一使用pinia自带的storeToRefs
const { counter, doubleCounter } = storeToRefs(counterStore);

// 二使用vue的computer 从store中读取
// const counter = computed(() => counterStore.counter)
// const doubleCounter = computed(() => counterStore.doubleCounter)

// 替换状态已有的属性值 相当于重新赋值而已
const replaceStore = () => {
    counterStore.$state = { counter: 20 };
};
</script>

至此：路由，pinia、ui库的安装以及使用完事。当然这里只是简单的讲怎么使用，更具体的参考官方文档。再第一篇里有官方文档链接，这里就不重复复述了。