使用vite搭建vue3、typeScript项目的具体步骤：

一、创建项目vite 一步步操作

1.使用npm：npm create vite@latest
2.使用yarn：yarn create vite
3.使用pnpm：pnpm create vite

直接创建middleground-login为项目名称

1.运行：npm create vite@latest middleground-login – --template vue其中
2.选择vue —— vue-ts
3.按照提示进行操作：
①cd 项目名
②npm install
③npm run dev

4.完成项目创建，运行效果：

二、细节配置

1.①配置tsconfig.json###

添加配置@，通过@代表src

"paths": {
      "@/*": [
        "./src/*"
      ]
    },

②同时在vite.config.ts文件中配置@：

import { defineConfig, ConfigEnv, UserConfigExport, loadEnv } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default (({ command, mode }: ConfigEnv): UserConfigExport => {
  // 环境变量
  let env = loadEnv(mode, process.cwd())

  // 是否为生产环境
  let isProduction = mode === 'production'

  return defineConfig({
    base: env.VITE_BASE,

    plugins: [
      vue(),
    ],
    css: {},
    resolve: {

      alias: {

        '@': '/src'
      }
    },
    server: {

      // host设置为true才可以使用network的形式，以ip访问项目
      host: true,

      // 端口号
      port: 8080,

      // 自动打开浏览器
      open: false,

      // 跨域设置允许
      cors: true,

      // 如果端口已占用直接退出
      strictPort: true,

      // 接口代理
      proxy: {
        '/workwxht': {
          target: 'http://192.168.1.101:9001',

          // 允许跨域
          changeOrigin: true,

          // 重写地址
          rewrite: (path) => path.replace('/workwxht/', '/')
        }
      }

    },
    build: {
      brotliSize: false,

      // 消除打包大小超过500kb警告
      chunkSizeWarningLimit: 500,

      // 在生产环境移除console.log
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        },
      },

      assetsDir: 'static/assets',

      // 静态资源打包到dist下的不同目录
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          // 静态资源分拆打包
          manualChunks(id: any) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        },
      },
    },
    define: {
      'process.env': { ...env, isProduction }
    }
  })
})

// export default defineConfig({
//   plugins: [vue()]
// })

2.安装vue-router配置路由：

npm i vue-router -S

配置路由：
createWebHistory 可以理解为history模式，路径不带#
createWebHashHistory可以理解为hash模式，路径带#

import {
  createRouter, createWebHistory
} from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'ceshi',
      path: '/ceshi',
      component: () => import("@/views/ceshi/index.vue"),
      meta: {
        title: '测试'
      }
    }
  ]
})
export default router;

修改App.vue,编辑路由出口

<template>
  <!-- 测试 -->
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</template>

在main.ts中配置路由

import { createApp } from 'vue'

import App from './App.vue'

// 路由
import $router from './router'

// createApp(App).mount('#app')
const app = createApp(App)

app.use($router)

app.mount('#app')

此时，通过对应的路由即可访问页面。

三、配置UI库

1.引入

element-plus：npm install element-plus --save

设置成官方推荐的自动引入方式：
安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

2.在vite.config.ts中配置自动导入：

// 自动导入引用
import AutoImport from "unplugin-auto-import/vite"

// 自动导入组件
import Components from 'unplugin-vue-components/vite'

// element plus 
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

plugins: [
      vue(),
      AutoImport({

        dts: './src/auto-imports.d.ts',

        imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],

        // Generate corresponding .eslintrc-auto-import.json file.
        // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
        eslintrc: {

          // Default `false`
          enabled: true,

          // Default `./.eslintrc-auto-import.json`
          filepath: './.eslintrc-auto-import.json',

          // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
          globalsPropValue: true,

        },

        resolvers: [ElementPlusResolver()],

      }),
      Components({

        dts: './src/components.d.ts',

        // imports 指定组件所在位置，默认为 src/components
        dirs: ['src/components/'],

        resolvers: [ElementPlusResolver()],

      }),
    ],

配置完成之后，可以直接在页面使用：

<template>
  <el-button>Default</el-button>
</template>

四、其他配置安装信息

1.安装axios：###

npm i axios -S

2.安装sass:###

npm i sass -D

3.安转vconsole便于移动端调试：

npm i vconsole -S

在main.ts文件中加上如下配置：

// 调试
import VConsole from 'vconsole'

let vConsole = new VConsole();

export default vConsole;

效果：

五、遇到的问题：

打包不成功：提示 Property ‘code’ does not exist on type ‘{}’
解决办法：打开package.json文件，将"build": “vue-tsc --noEmit && vite build"改为：build”: "vite build"即可。