vue3商城项目搭建

### 使用 Vue3 搭建电商网站或在线商店项目 #### 1. 初始化项目环境 为了创建一个基于 Vant4 和 Vue3 的电商项目，首先需要安装并初始化 Vue CLI 工具。这一步骤确保开发者拥有最新的工具链支持。 ```bash npm install -g @vue/cli vue create my-e-commerce-project cd my-e-commerce-project ``` #### 2. 安装依赖库 接下来，在新创建的项目目录下安装必要的 UI 组件库和其他依赖项： ```bash npm install vant@next axios vuex vue-router ``` 这些包分别用于提供移动端友好界面组件、发起 HTTP 请求、管理应用状态以及处理页面间导航[^1]。 #### 3. 设置全局样式与按需加载 编辑 `main.js` 文件引入 Vant 主题变量，并设置按需导入机制以优化打包体积： ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import 'vant/lib/index.css'; // 引入 Vant 样式文件 import router from './router'; import store from './store'; const app = createApp(App); app.use(router).use(store).mount('#app'); ``` 对于按需加载功能，则可以通过插件如 `babel-plugin-import` 来实现更细粒度控制。 #### 4. 创建基础布局结构 定义应用程序的主要视图层次结构，通常包括顶部栏（Header）、侧边菜单（Sidebar 或 Drawer）和底部导航条（Tabbar）。这部分工作可以在 `src/views/Home.vue` 中完成，利用 Vant 提供的各种容器类组件快速搭建起初步框架。 ```html <!-- src/views/Home.vue --> <template> <div class="home"> <!-- 头部区域 --> <van-nav-bar title="首页"/> <!-- 页面主体内容区 --> <router-view></router-view> <!-- 底部导航 --> <van-tabbar route> <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item> <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item> <van-tabbar-item replace to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item> <van-tabbar-item replace to="/user" icon="contact">我的</van-tabbar-item> </van-tabbar> </div> </template> <script setup lang="ts"></script> <style scoped></style> ``` #### 5. 实现商品列表展示 编写获取远程数据接口函数，并将其集成到 Vuex Store 中以便于跨模块共享；随后在具体的产品详情页或其他地方调用相应 action 方法来刷新显示的商品信息[^4]。 ```typescript // src/store/modules/goods.ts export default { namespaced: true, state() { return { list: [], }; }, mutations: {}, actions: { async fetchGoodsList({ commit }) { const response = await axios.get('/api/v1/products'); console.log(response.data); commit('setGoodsList', response.data.items || []); } } } ``` 最后，在对应的视图组件内通过计算属性访问存储器中的最新状态变化，从而动态渲染出完整的商品卡片集合。 ```html <!-- src/components/Goods/List.vue --> <template> <div class="goods-list"> <van-card v-for="(item, index) in goods" :key="index" :title="item.title" :desc="item.description" :price="item.price.toFixed(2)" thumb="https://dummyimage.com/80x80/ccc/fff.png&text=Product+Image" /> </div> </template> <script setup lang="ts"> import { computed } from "vue"; import { useStore } from "@/store"; defineProps<{ msg?: string; }>(); const store = useStore(); await store.dispatch("goods/fetchGoodsList"); const goods = computed(() => store.state.goods.list); </script> ```