vue3系统项目架构搭建（vite+vue3+ts+pinia+vueuse+elPlus）；结合网上指导以及自身构建后采坑的心得，可闭眼入

本文详细介绍了如何使用vite初始化Vue3项目，并逐步集成typescript、pinia状态管理、vue-router4、vueuse实用库以及unplugin-auto-import和unplugin-vue-components等工具，提供了一套完整的前端项目架构搭建流程，帮助开发者避免常见坑点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化项目

快捷指令

# pnpm
pnpm create vite project-name -- --template vue-ts

# npm 6.x
npm init vite@latest project-name --template vue-ts
 
# npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts
 
# yarn
yarn create vite project-name --template vue-ts

集成配置

// 确保node可用
pnpm i @types/node --save-dev

// 修改tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "~/*":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  //关键一步，除了以下两个文件，都引入，使得项目认识*.d.ts文件，从而配合下文讲到的插件实现自动引入
  "exclude": ["dist", "node_modules"]
}

// 修改vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
//path模块如果找不到就运行pnpm i @types/node --save-dev，更新一下
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode,process.cwd(), '');
  return {
    base:env.NODE_ENV === 'development'?'./':env.VITE_APP_ROUTE_PREFIX,
    resolve: {
      //设置别名
      alias: {
          '~/':`${path.resolve(__dirname, 'src')}/`
      }
    },
    plugins: [
      vue(),
    ],
    server:{
      proxy:{
        ['^' + env.VITE_APP_API_PREFIX]:{
          target:env.VITE_APP_SERVER_URL,
          rewrite:(path)=>{
            return path.replace(new RegExp('^' + env.VITE_APP_API_PREFIX), '');
        },
        chan