Element Plus 与工程化

一、引入 Element Plus

Element Plus 是 Vue 3 生态最流行的企业级组件库。本项目用它开发界面（后台管理也能直接复用）。

npm install element-plus

// src/main.ts 完整引入（新手推荐，简单；按需引入是进阶优化）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, { locale: zhCn })

按需引入（unplugin-auto-import）能减小打包体积，属于性能优化章节的内容，入门阶段完整引入即可。

二、常用组件清单（商城用到的）

组件	用途	已用位置
el-button	按钮	登录/加购/结算
el-input	输入框	搜索/登录表单
el-card	卡片容器	商品/订单
el-tag	标签	订单状态
el-pagination	分页	商品列表
el-input-number	数字输入	加购数量
el-message	轻提示	操作反馈
el-message-box	确认框	删除确认
el-badge	徽标	购物车数量
el-dialog	弹窗	收货地址
el-form	表单校验	登录注册

三、搭建公共布局（Header + Footer）

<!-- src/layouts/DefaultLayout.vue -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'

const router = useRouter()
const userStore = useUserStore()
const cartStore = useCartStore()
</script>

<template>
  <header class="header">
    <RouterLink to="/home" class="logo">商城</RouterLink>
    <nav>
      <RouterLink to="/home">首页</RouterLink>
      <RouterLink to="/cart">
        <el-badge :value="cartStore.cartCount" :hidden="cartStore.cartCount === 0">
          购物车
        </el-badge>
      </RouterLink>
      <RouterLink to="/order/list">我的订单</RouterLink>
    </nav>
    <div v-if="userStore.isLogin" class="user">
      <span>{{ userStore.nickname }}</span>
      <el-button text @click="userStore.logout(); router.push('/home')">退出</el-button>
    </div>
    <RouterLink v-else to="/login"><el-button>登录</el-button></RouterLink>
  </header>

  <main class="main"><RouterView /></main>
  <footer class="footer">全栈教程 · 商城项目</footer>
</template>

<style scoped>
.header { display: flex; align-items: center; gap: 24px;
          padding: 0 24px; height: 56px; background: #fff;
          box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.main { max-width: 1200px; margin: 24px auto; min-height: calc(100vh - 130px); }
</style>

改造路由，让页面挂在布局下：

{
  path: '/',
  component: () => import('@/layouts/DefaultLayout.vue'),
  children: [
    { path: 'home', name: 'Home', component: () => import('@/views/HomeView.vue') },
    { path: 'cart', name: 'Cart', component: () => import('@/views/CartView.vue') },
    { path: 'order/list', name: 'OrderList', component: () => import('@/views/OrderListView.vue') },
  ],
},
{ path: '/login', component: () => import('@/views/LoginView.vue') },

四、ESLint + Prettier：代码规范

脚手架默认已装。约定（也写进 .prettierrc）：

• 缩进 2 空格，无分号（Vue 官方风格）
• 单引号
• import 排序、自动修复

npm run lint       # 检查
npm run lint:fix   # 自动修复

commit 前跑一次 lint，是入门企业规范的第一步。

五、环境变量与配置

不同环境（开发/测试/生产）的后端地址不同，用 .env 区分：

# .env.development
VITE_API_BASE=/api

# .env.production
VITE_API_BASE=https://api.mall.com/api

代码里通过 import.meta.env.VITE_API_BASE 读取，Axios 的 baseURL 改为它。

六、工程化自查清单

• [ ] 公共布局（Header/Footer）抽成 Layout
• [ ] 接口统一走 utils/request.ts
• [ ] 类型统一放 src/types
• [ ] lint / format 通过
• [ ] 环境变量区分 dev / prod

完成 Vue 端

到这一步，Vue 商城前端已具备完整工程结构。先别深入优化，跳到 第 5 部分 用 React 实现同样功能，或者先把 第 6 部分 后端写完回来联调。