Vue项目创建教程：使用Vue CLI与Vite的完整步骤

# 使用npm安装
npm install -g @vue/cli
 
# 使用yarn安装
yarn global add @vue/cli
 
# 验证安装
vue --version

# 创建新项目
vue create my-vue-project
 
# 进入项目目录
cd my-vue-project
 
# 启动开发服务器
npm run serve

my-vue-project/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
├── package.json
├── vue.config.js
└── README.md

# 使用npm创建
npm create vue@latest my-vue-app
 
# 使用yarn创建
yarn create vue my-vue-app
 
# 使用pnpm创建
pnpm create vue my-vue-app

✔ Project name: … my-vue-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

# 进入项目目录
cd my-vue-app
 
# 安装依赖
npm install
 
# 启动开发服务器
npm run dev

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
  
  // 输出目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'static',
  
  // 开发服务器配置
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  // Webpack配置修改
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
export default defineConfig({
  plugins: [vue()],
  
  // 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  
  // 开发服务器配置
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    minify: 'terser',
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

# 移除Vue CLI相关依赖
npm uninstall @vue/cli-service
 
# 安装Vite相关依赖
npm install --save-dev vite @vitejs/plugin-vue

// vue.config.js (旧)
module.exports = {
  publicPath: '/app/',
  devServer: {
    port: 8080
  }
}
 
// vite.config.js (新)
export default defineConfig({
  base: '/app/',
  server: {
    port: 8080
  }
})

# Vue CLI环境变量
VUE_APP_API_URL=https://api.example.com
 
# Vite环境变量
VITE_API_URL=https://api.example.com

<!-- AI生成的用户卡片组件 -->
<template>
  <div class="user-card">
    <img :src="user.avatar" :alt="user.name" class="avatar" />
    <div class="user-info">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
      <span class="status" :class="user.status">{{ user.status }}</span>
    </div>
  </div>
</template>
 
<script setup>
defineProps({
  user: {
    type: Object,
    required: true
  }
})
</script>
 
<style scoped>
.user-card {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: white;
}
 
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
}
 
.user-info h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}
 
.user-info p {
  margin: 0 0 8px 0;
  color: #6b7280;
  font-size: 14px;
}
 
.status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
 
.status.online {
  background: #dcfce7;
  color: #166534;
}
 
.status.offline {
  background: #fee2e2;
  color: #991b1b;
}
</style>

src/
├── components/          # 通用组件
│   ├── common/         # 基础组件
│   └── business/       # 业务组件
├── views/              # 页面组件
├── router/             # 路由配置
├── stores/             # Pinia状态管理
├── composables/        # 组合式函数
├── utils/              # 工具函数
├── assets/             # 静态资源
└── styles/             # 样式文件

// vue.config.js优化配置
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          }
        }
      }
    }
  }
}

# 增加Node.js内存限制
node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'axios'],
    exclude: ['some-problematic-dep']
  }
})

# .env文件
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My Vue App

// 生产环境Vite配置
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          utils: ['lodash-es', 'axios']
        }
      }
    },
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})