1、创建项目

pnpm create vite my-vue3-ts --template vue-ts

2、安装依赖

pnpm install

3、运行项目

pnpm dev

4、开发配置 vite.config.ts

1、server配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:"0.0.0.0",     //指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
    port:7878,          //指定开发服务器端口
    open:"/",           //在开发服务器启动时自动在浏览器中打开应用程序
  }
})

2、路径别名配置

1、安装必要依赖

pnpm install @types/node

2、插件安装

• Path Intellisense

• Path Autocomplete

3、配置 vite.config.ts 文件

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

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, './src'), // 将 @ 指向 src 目录
'@components': resolve(__dirname, './src/components'), // 自定义其他别名
},
},
});

4、配置 tsconfig.json 文件

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

遇到问题，怎么解决呢，可以正常运行

5、集成element-plus

1、安装element-plus

参考 安装 | Element Plus

pnpm install element-plus

2、全局引入main.ts

参考 快速开始 | Element Plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3、测试app.vue

参考 Button 按钮 | Element Plus

<template>
  <div>
    <el-button type="primary">测试</el-button>
  </div>
  
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

6、集成element-plus 图标

1、安装icon

参考 Icon 图标 | Element Plus

pnpm install @element-plus/icons-vue

2、注册所有图标main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')

3、测试图标集成App.vue

<template>
  <div>
    <el-button type="primary">测试</el-button>
    <el-icon :size="20">
      <Edit />
    </el-icon>
  </div>
  
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

7、集成UnoCSS

参考 UnoCSS Vite 插件

1、安装UnoCSS

pnpm add -D unocss

2、vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

3、main.ts

import 'virtual:uno.css'

遇到问题：写样式没有提示，但是可以生效