（1）vite+ts+vue3项目搭建完整项目

搭建

一、vite项目搭建

npm create vite@latest

输入项目的名字

Project name: » vite-project

选择框架

√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte

选择ts

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt

然后按步骤启动项目

安装 path / @types/node / router / pinia 

npm install path --save
npm install @types/node --save-dev
npm install vue-router@4 
npm install pinia 

安装less 、sass、scss （修改后缀）

 npm add -D less 

在vite.cofig.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
});

在src路径创建router文件夹 index页面

import { createRouter, createWebHistory,RouteRecordRaw ,createWebHashHistory} from "vue-router";
import home from "../views/login.vue"
const routes: RouteRecordRaw[] = [
    {
      path: "/",
      component: home,
    },
  ];

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

在main.ts页面引入router

// 导入路由管理对象
import router from "@/router";
const app=createApp(App)
//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()
app.use(router).use(pinia)

在app.vue页面写入<router-view> </router-view>，接管app页面

在src下创建一个 store 文件夹，再创建一个 home.ts 文件

其它名也可以，因为pinia它有一个根文件，会把 defineStore 第一个参数当id值，相当于vuex中的 module 自动引入，也会在Vue.js devtools 插件中以第一个参数名展示（下面展示）

注意：defineStore第一个参数很重要，而且是唯一值。它的命名在devtools 插件能方便找到这个文件的数据，方便调试

import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之类的名字 
// defineStore('main',{..}) 在devtools 就使用 main 这个名
export const useMain = defineStore('main', {
    // 相当于data
    state: () => {
        return {
          // 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
          counter: 0,
          name: 'Eduardo',
        }
    },
    // 相当于计算属性
    getters: {
        doubleCount: (state) => {
            return state.counter * 2
        },
    },
    // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
    actions: {
        increment() {
          this.counter++
        },
        randomizeCounter() {
            setTimeout(() => {
                this.counter = Math.round(100 * Math.random())
            }, 0);
        },
    },
})

在要使用pinia的组件

<template>
    <div>counter:{{counter}}</div>
    <div>doubleCount:{{doubleCount}}</div>
    <a-button @click="main.randomizeCounter()">counter(round)</a-button>
    <a-button type="primary" @click="main.increment()">counter++</a-button>
 
    <div>{{name}}</div>
    <a-button @click="amend()">修改</a-button>
</template>
<script setup lang='ts'>
 
//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../store/home'
import { storeToRefs } from 'pinia';
 
const main = useMain()
// 解构main里面的state和getters的数据，
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据，不过这我只用来渲染
const { counter,name ,doubleCount } = storeToRefs(main)
 
//（常用方法三种）
//常用方法一： 使用数据
console.log( counter );
//使用方法(方法目前不能解构)
main.increment()
 
 
// 常用方法二：修改数据
counter = 9999
 
//常用方法三：
//进阶使用$patch，多个修改
const amend=()=>{
    main.$patch((state) => {
        state.counter += 10;
        state.name = '张三'
    })
}
 
</script>

Vue.js devtools 环境下通过 defineStore 第一个参数当id值找到对应的仓库

vue-devtools插件

如果你没有vue-devtools，而又想下载这里有一个教程下载

对vue-devtools的下载、编译、安装、使用

数据持久化插件

如果你想要数据持久化可以试下这个插件，简单使用

数据持久化插件

安装axios

想要方便使用axios，想要封装统一的请求头处理，便于接口的统一管理，以及解决出现回调地狱。

可以通过下面的链接去实现

 vite + vue3 +ts 安装并封装axios

 因为写的比较多了，看起来烦，所以把一起写在别链接上，下面这些都是自己的需求来安装

8、自定义组件名
TIP：在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。

也就是说，除非你想换名，并且又不想写两个 script 标签，就可以通过下面的链接去做。

 Vue3 setup 语法糖下如何定义组件名称

9、安装element-puls组件库
安装自动按需导入element-puls组件。如果不使用element,可以试下 Ant Design Vue 组件库，一般只要一个就够了。

vite + vue + ts 自动按需导入 Element Plus组件，与按需导入后的ElMessage与ElLoading 的问题

10、安装 Ant Design Vue 组件库
安装自动按需导入Ant Design Vue 组件。

vite + vue3 + ts 自动按需导入ant-design-vue组件

11、安装与使用Echarts
这个看你的项目要不要使用Echarts，如果不用可以忽略。

安装与使用Echarts，这个链接的方法是在vite+vue3，而且是固定的宽高，不是响应式的可视化。

vue3 + ts 在 setup 下使用Echarts