不使用 WSL在本地新建一个新项目Vue3 Pinia TypeScript ElementPlus使用 pnpm使用Vite官方模板创建的项目但是要清除掉所有示例代码保留干净的项目结构。步骤1使用Vite创建Vue3项目bash# 创建项目使用官方模板 pnpm create vite my-vue3-clean -- --template vue-ts # 进入项目目录 cd my-vue3-clean步骤2安装额外依赖bash# 安装Pinia和Element Plus pnpm add pinia element-plus element-plus/icons-vue步骤3清理示例代码清空src/App.vuevuetemplate div !-- 你的应用内容 -- /div /template script setup langts // 你的应用逻辑 /script style scoped /* 你的样式 */ /style清空src/components/目录bash# 删除示例组件 rm src/components/HelloWorld.vue # 或者Windows PowerShell Remove-Item src/components/HelloWorld.vue重置src/style.csscss/* 重置所有默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 你可以在这里添加全局样式 */简化src/main.tstypescriptimport { createApp } from vue import { createPinia } from pinia import ElementPlus from element-plus import element-plus/dist/index.css import ./style.css import App from ./App.vue const app createApp(App) // 使用Pinia app.use(createPinia()) // 使用Element Plus app.use(ElementPlus) app.mount(#app)步骤4创建基础目录结构bash# 创建必要的目录 mkdir src/views mkdir src/router mkdir src/stores mkdir src/utils mkdir src/types mkdir src/api mkdir src/layouts步骤5创建类型定义文件创建src/types/global.d.tstypescript// 全局类型定义 export {}; declare global { // 在这里定义全局类型 }步骤6创建示例Store可选但建议保留模板创建src/stores/index.tstypescriptimport { defineStore } from pinia import { ref } from vue export const useMainStore defineStore(main, () { // 你的状态 const count ref(0) // 你的方法 function increment() { count.value } return { count, increment } })步骤7更新配置文件可选优化更新vite.config.tstypescriptimport { defineConfig } from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({ plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, ./src), } }, server: { port: 3000, open: true } })更新tsconfig.json添加路径映射json{ compilerOptions: { target: ES2020, useDefineForClassFields: true, module: ESNext, lib: [ES2020, DOM, DOM.Iterable], skipLibCheck: true, moduleResolution: bundler, allowImportingTsExtensions: true, resolveJsonModule: true, isolatedModules: true, noEmit: true, jsx: preserve, strict: true, noUnusedLocals: true, noUnusedParameters: true, noFallthroughCasesInSwitch: true, baseUrl: ., paths: { /*: [src/*] } }, include: [src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue], references: [{ path: ./tsconfig.node.json }] }步骤8最终项目结构textmy-vue3-clean/ ├── src/ │ ├── api/ # API接口 │ ├── assets/ # 静态资源 │ │ └── vue.svg # 默认logo可以删除 │ ├── components/ # 公共组件空目录 │ ├── layouts/ # 布局组件 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia状态管理 │ │ └── index.ts # 示例store │ ├── types/ # TypeScript类型定义 │ │ └── global.d.ts │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── App.vue # 根组件已清空 │ ├── main.ts # 入口文件已简化 │ ├── style.css # 全局样式已重置 │ └── vite-env.d.ts # Vite类型声明 ├── index.html ├── package.json ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── .gitignore步骤9运行项目bash# 安装依赖 pnpm install # 启动开发服务器 pnpm run dev可选添加Vue Router如果需要路由功能bashpnpm add vue-router4创建src/router/index.tstypescriptimport { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), routes: [ // 你的路由配置 ] }) export default router然后在main.ts中使用typescriptimport router from ./router app.use(router)现在您拥有一个干净的Vue 3项目没有任何示例代码只有基础的技术栈配置Vue 3 Pinia TypeScript Element Plus。