Vite 工程搭建

一、创建工程

Vite 是现在最主流的 Vue/React 构建工具，启动快、配置简单。

# 在仓库根目录下创建
npm create vue@latest web-vue

交互式选项建议如下：

✔ Project name: web-vue
✔ Add TypeScript? » Yes
✔ Add JSX Support? » No
✔ Add Vue Router for Single Page Application? » Yes
✔ Add Pinia for state management? » Yes
✔ Add Vitest for Unit Testing? » Yes（可选）
✔ Add ESLint and Prettier? » Yes

npm create vue@latest 是官方脚手架，会自动生成规范化目录。

二、目录结构说明

web-vue/
├── public/            # 不经过构建的静态资源
├── src/
│   ├── main.ts        # 入口：创建应用、挂载路由与 Pinia
│   ├── App.vue        # 根组件
│   ├── router/        # 路由配置
│   ├── stores/        # Pinia
│   ├── views/         # 页面组件
│   ├── components/    # 通用组件
│   └── assets/        # 样式等资源
├── index.html
├── vite.config.ts
└── tsconfig.json

三、启动与常用命令

npm install
npm run dev         # 开发模式，默认 http://localhost:5173
npm run build       # 生产构建，输出 dist/
npm run preview     # 本地预览构建产物

四、配置 Vite：代理（解决跨域）

开发时前端在 5173，后端在 8080，直接请求会跨域。配置代理，让 /api 开头的请求转发到后端：

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',   // 后端地址
        changeOrigin: true,
      },
    },
  },
})

配置后，前端代码里请求 /api/product/list，Vite 会自动转发到 http://localhost:8080/api/product/list，浏览器端无跨域报错。

@ 别名

@ 指向 src/，之后 import '@/api/product' 不用再写相对路径 ../../。需要同步在 tsconfig.json 里声明 paths，否则 TS 会报错。

五、最小可运行骨架

<!-- src/App.vue -->
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

// src/router/index.ts（先用最小路由跑通）
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: () => import('@/views/HomeView.vue') },
  ],
})

export default router

<!-- src/views/HomeView.vue -->
<script setup lang="ts"></script>
<template>
  <h1>商城首页占位</h1>
</template>

六、验收

npm run dev

打开 http://localhost:5173/home 能看到"商城首页占位"，工程就绪。下一章接入路由和状态管理。

为什么用脚手架而不是手写

脚手架生成的是经过大量实践检验的规范配置（TS、ESLint、路径别名都配好），和企业初始化项目的做法一致。手写配置留到你想深入构建工具时再说。