从嵌入式到Web开发：Vue3商城项目实战与思维转换

1. 项目背景与核心需求

作为一名嵌入式开发者突然转向Web开发领域，这个转型过程本身就充满挑战。我在第43天的自学中选择了"商城网页"这个项目，主要基于以下几个实际考量：

首先，商城类网页几乎涵盖了前端开发的所有核心要素：用户交互、数据展示、状态管理、前后端通信等。通过这个项目可以系统性检验前期学习成果。其次，嵌入式开发背景让我对系统资源管理、性能优化有独特视角，正好可以对比Web端的实现差异。

这个项目的核心需求很明确：

• 实现基础商品展示功能（分类、列表、详情）
• 完整的购物车管理（增删改查）
• 模拟用户登录/注册流程
• 响应式布局适配多终端

2. 技术选型与架构设计

2.1 前端框架选择

放弃直接使用jQuery等传统方案，选择Vue 3组合式API作为核心框架。原因有三：

1. 组件化开发模式与嵌入式开发的模块化思想高度契合
2. 响应式系统可以简化状态管理复杂度
3. Composition API更符合嵌入式开发者的函数式思维习惯

javascript复制// 典型商品组件结构
export default {
  setup() {
    const products = ref([])
    const loadProducts = async () => {
      products.value = await fetchGoodsList()
    }
    return { products, loadProducts }
  }
}

2.2 状态管理方案

虽然Vuex是主流选择，但最终采用Pinia：

• 更简洁的API设计
• 完善的TypeScript支持
• 与Composition API风格统一

javascript复制// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  actions: {
    addItem(product) {
      const existing = this.items.find(i => i.id === product.id)
      exis