Vue3+Vite电商后台系统实战指南

从零开始用Vue3+Vite构建响应式电商后台管理系统

电商后台管理系统是现代电商平台的核心组成部分，采用Vue3和Vite技术栈可以快速构建高性能、响应式的管理界面。本文将详细介绍从零开始构建电商后台管理系统的完整流程。

1. 项目初始化与基础配置

首先使用Vite创建Vue3项目，执行命令：

npm create vite@latest admin-system -- --template vue
cd admin-system
npm install

安装必要的依赖：

Element Plus：基于Vue3的UI组件库
Vite-plugin-vue-setup-extend：支持在script setup中使用name选项
axios：HTTP客户端，用于API请求
vue-router：路由管理
pinia：状态管理

在vite.config.js中配置路径别名：

import { defineConfig } from \'vite\'
import vue from \'@vitejs/plugin-vue\'
import path from \'path\'

export defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      \'@\': path.resolve(__dirname, \'src\')
    }
  }
})

2. 项目结构设计

合理的项目结构有助于代码维护。建议采用以下目录结构：

src/api：API接口封装
src/assets：静态资源
src/components：公共组件
src/layouts：布局组件
src/router：路由配置
src/stores：Pinia状态管理
src/views：页面视图
src/utils：工具函数

3. 路由与布局实现

使用vue-router设置路由，配置动态路由和权限控制：

import { createRouter, createWebHistory } from \'vue-router\'
import Layout from \'@/layouts/index.vue\'

const routes = [
  {
    path: \'/admin\',
    component: Layout,
    children: [
      {
        path: \'dashboard\',
        component: () => import(\'@/views/dashboard/index.vue\')
      },
      {
        path: \'products\',
        component: () => import(\'@/views/products/index.vue\')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

布局组件包含侧边栏导航、顶部导航和主内容区：

<template>
  <div class=\"app-wrapper\">
    <Sidebar />
    <div class=\"main-container\">
      <Navbar />
      <router-view />
    </div>
  </div>
</template>

4. 状态管理与API封装

使用Pinia管理全局状态，创建用户状态store：

import { defineStore } from \'pinia\'
import { login } from \'@/api/user\'

export const useUserStore = defineStore(\'user\', {
  state: () => ({
    token: localStorage.getItem(\'token\'),
    userInfo: null
  }),
  actions: {
    async login(data) {
      const res = await login(data)
      this.token = res.token
      this.userInfo = res.user
      localStorage.setItem(\'token\', res.token)
    }
  }
})

封装axios实例，配置请求拦截器和响应拦截器：

import axios from \'axios\'
import { useUserStore } from \'@/stores/user\'

const service = axios.create({
  baseURL: \'/api\',
  timeout: 5000
})

service.interceptors.request.use(config => {
  const userStore = useUserStore()
  if (userStore.token) {
    config.headers[\'Authorization\'] = `Bearer ${userStore.token}`
  }
  return config
})

export default service

5. 响应式设计与组件开发

使用Element Plus的栅格系统实现响应式布局：

<el-row :gutter=\"20\">
  <el-col :xs=\"24\" :sm=\"12\" :md=\"8\">
    <el-card>响应式卡片</el-card>
  </el-col>
</el-row>

开发商品管理模块，包含列表展示、搜索、分页等功能：

<template>
  <div>
    <el-form :inline=\"true\">
      <el-form-item>
        <el-input v-model=\"searchForm.keyword\" placeholder=\"商品名称\"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type=\"primary\" @click=\"handleSearch\">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <el-table :data=\"tableData\">
      <el-table-column prop=\"name\" label=\"商品名称\"></el-table-column>
      <el-table-column prop=\"price\" label=\"价格\"></el-table-column>
    </el-table>
    
    <el-pagination 
      @current-change=\"handlePageChange\"
      :current-page=\"pagination.page\"
      :page-size=\"pagination.size\"
      :total=\"pagination.total\">
    </el-pagination>
  </div>
</template>

6. 构建与部署

执行构建命令生成生产环境文件：

npm run build

部署到Nginx服务器，配置反向代理：

server {
  listen 80;
  server_name admin.example.com;
  
  location / {
    root /var/www/admin-system;
    try_files $uri $uri/ /index.html;
  }
  
  location /api {
    proxy_pass http://backend-api;
  }
}