企业官网建设流程全解析

简介：基于Vue、JavaScript、HTML与CSS构建的土特产web端设计源码，适合具备一定前端基础、希望熟悉Vue项目完整流程的学习者或开发者，也可作为农产品电商类页面设计的参照。压缩包共含34个文件，主要类型为13个vue组件、6个js逻辑文件、6张png图片及json、css等，整体大小仅1.15MB。项目目录清晰，涵盖登录、首页、商品分类、购物车、订单、消息、搜索等典型模块，并配有路由与状态管理配置，可直接运行或二次开发。目前已有263人学习，通过阅读源码可以快速掌握Vue组件化开发、页面间传值、接口数据渲染等实用技巧，对构建轻量级web前端具有直接参考价值。此外，包内还包含图标、图片及样式文件，便于直观调整界面效果。

1. 从“土特产”页面结构看 Vue 单页应用的目录设计

第一次打开这套源码时，我其实没急着看业务代码，而是先把它当“Vue 工程规范样板”来拆。34 个文件不算多，但pages、components、router、store、assets、views全齐了，Cart、Cate、Message、Search、News、Order、HomePage这些页面文件一看就知道是一个电商类 Web 端的典型骨架。对想学 Vue 组件化开发的人来说，文件名就是最好的需求文档；对要二次开发的人来说，这个目录可以直接套到企业后台或本地生活项目上，省掉从零搭脚手架的步骤。下面我按“页面组件 → 路由/状态 → 通用组件 → 构建部署”的顺序把它拆开讲，每一步都给出可复现的代码思路和参数踩坑记录。

2. 页面组件拆解：从 Cart 到 HomePage 的业务职责划分

先理清src/pages和src/views的分工。这套源码里两个目录都出现了，pages下放的是带有业务语义的页面级组件，比如Cart.vue（购物车）、Order.vue（订单）、Message.vue（消息）、Search.vue（搜索）、News.vue（资讯）、Cate.vue（分类）、HomePage.vue（首页）；views下放的是路由挂载的外层视图，比如Home.vue。我在重构这类项目时，习惯把pages目录定为“路由直接对应的页面”，把views作为“布局容器或嵌套路由的父组件”，避免HomePage和Home这类名字在 import 时混淆。

每个页面组件的内部逻辑，按照 Vue 2 选项式 API 的惯例，大多会包含data、computed、methods三段。以Cart.vue为例子，它通常需要从store里读购物车列表，再通过 mutation 修改选中状态或数量。下面是一个典型的购物车页面片段，不是源码原样，但这套目录下的组件大概率就是这么组织的：

<template> <div class="cart-page"> <ul> <li v-for="item in cartList" :key="item.id"> <input type="checkbox" v-model="item.checked" /> <span>{{ item.name }}</span> <input type="number" v-model.number="item.count" min="1" /> <button @click="removeItem(item.id)">删除</button> </li> </ul> <div>总价：¥ {{ totalPrice }}</div> </div> </template> <script> import { mapGetters } from 'vuex' export default { name: 'Cart', computed: { ...mapGetters(['cartList']), totalPrice() { return this.cartList .filter(item => item.checked) .reduce((sum, item) => sum + item.price * item.count, 0) } }, methods: { removeItem(id) { this.$store.commit('cart/remove', id) } } } </script>

这段代码的逻辑说明如下：mapGetters把store里的cartList映射成计算属性，模板里直接v-for遍历；totalPrice只累加checked为true的行，避免把未勾选商品计入结算；删除操作通过this.$store.commit('cart/remove', id)调用模块化的 Vuex mutation，而不是直接改 data，这样刷新页面后数据还能通过持久化插件恢复。参数上比较容易被忽略的是v-model.number，如果不加.number，input框输入的数字会变成字符串，count * price时就可能出现字符串拼接的 bug。

Cate.vue和Search.vue的功能可以对照来看。分类页往往会加载一个两级分类树，左侧是父分类，右侧是子分类或商品列表；搜索页则接收路由参数keyword，再调用商品接口。这两类页面在 Vue 里的焦点问题都是“参数变化时如何重新请求”。常见做法是在watch里监听$route.query，如下：

watch: { '$route.query.keyword': { handler(newVal) { this.fetchList(newVal) }, immediate: true } }

使用immediate: true是因为进入页面时$route.query可能已经存在，如果只写handler，首次渲染不会触发。这里有一个容易踩的坑：如果搜索页是通过<router-link>带 query 跳转的，页面组件实例会被复用，只有beforeRouteUpdate或watch才能感知到参数变化，所以在methods里写死初始化逻辑是不够的。

Order.vue、Message.vue和News.vue这三个页面相对独立，它们的共同点是都有“列表 → 详情”的交互。为了减少重复代码，我通常在pages下建一个list-mixin.js，把分页参数、加载状态、错误提示抽出来，但这份源码里没有单独抽 mixin，说明作者可能更倾向在每个页面里直接写。这种做法的好处是单页面逻辑不依赖外部文件，坏处是News和Message的getList方法几乎一模一样，后期改分页样式时要改两个文件。如果你要二次开发，建议把列表请求抽成composable或mixin，把pageNum、pageSize、loading统一管理。

HomePage.vue是整个项目的门面，它通常会引入Nav.vue、Header.vue和List.vue这几个通用组件，再组合成楼层结构。这里的组件通信方式值得单独说一下：首页的热门商品、推荐资讯、分类入口都是通过props从父组件传入，而点击行为则通过$emit抛给父组件处理。这种单向数据流的写法比直接调用this.$parent要干净，后面第 4 章会专门展开。

3. 路由与状态管理：router/index.js 和 store/index.js 的协同设计

这套源码的src/router/index.js和src/store/index.js分别负责 URL 和数据架构。先看路由，基于pages下的文件列表，可以推测出典型的路由映射关系如下：

实际源码里可能用views/Home.vue作为根路由再嵌套子路由，但无论是哪种写法，路由配置都建议用懒加载，这样首屏只加载HomePage，其他页面在访问时才拉取 JS chunk。下面是一个符合该目录结构的路由写法：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/login', name: 'Login', component: () => import('../pages/login') }, { path: '/', component: () => import('../views/Home.vue'), children: [ { path: '', name: 'HomePage', component: () => import('../pages/HomePage.vue') }, { path: 'cart', name: 'Cart', component: () => import('../pages/Cart.vue') }, { path: 'cate', name: 'Cate', component: () => import('../pages/Cate.vue') }, { path: 'search', name: 'Search', component: () => import('../pages/Search.vue') }, { path: 'news', name: 'News', component: () => import('../pages/News.vue') }, { path: 'message', name: 'Message', component: () => import('../pages/Message.vue') }, { path: 'order', name: 'Order', component: () => import('../pages/Order.vue') } ] } ] const router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, routes }) router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.path !== '/login' && !token) { next('/login') } else { next() } }) export default router

这里的参数说明：mode: 'hash'是这类源码最常见的配置，因为部署到静态服务器时不需要后端做路由转发，访问index.html就能跑，代价是 URL 里会带#。如果改成history模式，就必须在 Nginx 里配置try_files $uri $uri/ /index.html，否则刷新二级页面直接 404。base: process.env.BASE_URL的值来自vue.config.js的publicPath，通常是'/'或'./'，这个后面第 5 章会说。路由守卫里我用了localStorage判断登录态，但更稳妥的做法是把 token 放在 Vuex 中并同步到sessionStorage，因为localStorage不会自动过期，退出登录时容易漏清。

再看store/index.js，这个文件在源码里是单一 store 入口，模块化设计通常放在store/modules下，但这套源码只有单一的index.js，说明业务状态量不大。一个典型的土特产项目 store 大概会这样组织：

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { userInfo: null, cartList: [], selectedCategory: '' }, mutations: { SET_USER(state, user) { state.userInfo = user }, CART_ADD(state, product) { const existed = state.cartList.find(item => item.id === product.id) if (existed) { existed.count += product.count || 1 } else { state.cartList.push({ ...product, count: product.count || 1 }) } }, CART_REMOVE(state, id) { state.cartList = state.cartList.filter(item => item.id !== id) } }, actions: { addToCart({ commit }, product) { commit('CART_ADD', product) } }, getters: { cartTotalCount(state) { return state.cartList.reduce((sum, item) => sum + item.count, 0) } } }) export default store

这里有几个设计上的细节。第一，state里不存放组件私有状态，比如搜索框的输入内容就应该放在组件data里，因为刷新页面后不该保留；而cartList放 store 是因为多个页面（首页、分类页、购物车页）都要读写它。第二，mutations里用CART_ADD做“存在则累加”的逻辑，比单纯push更符合真实购物场景。第三，getters里的cartTotalCount用于Header.vue中显示角标数字，这样 Header 组件不需要知道 cart 的变化来源，只要mapGetters拿值即可。如果后续要做持久化，可以在初始化时从localStorage里读cartList，再在每次CART_ADD或CART_REMOVE后写回，这里不推荐引入 vuex-persistedstate 插件，因为项目文件里没有依赖这个包，手工序列化几行代码就够。

路由和 store 的协同点主要体现在两个地方：一是登录后把用户信息从 store 同步到路由元信息，二是在beforeEach守卫里读取 store 的 token 而不是直接读localStorage。因为 store 是在内存里的，刷新页面后 store 会被重建，如果没做持久化，直接在守卫里store.state.token会得到null，所以要么在main.js里初始化 store 时从localStorage恢复，要么守卫里回退到localStorage。我一般选择后者，逻辑更直观。

4. 通用组件复用与静态资产组织：Header/Nav/List 的实践

src/components目录下的Header.vue、Nav.vue、List.vue是这套源码的复用核心。这三个组件都不是业务页面，而是被多个页面引用的公共单元。先看Header.vue，它通常包含搜索框、购物车入口、登录状态展示，需要接收外部传入的关键词和用户信息。组件设计上要控制“知道得越少越好”，所以用props定义接口，用$emit通知外部行为：

<template> <div class="header"> <input class="header-search" type="text" :value="keyword" placeholder="搜索土特产" @input="$emit('update:keyword', $event.target.value)" @keyup.enter="$emit('search', $event.target.value)" /> <router-link class="header-cart" to="/cart"> 购物车 <span v-if="totalCount">{{ totalCount }}</span> </router-link> <template v-if="user"> <span>{{ user.name }}</span> <button @click="$emit('logout')">退出</button> </template> <router-link v-else to="/login">登录</router-link> </div> </template> <script> export default { name: 'Header', props: { keyword: { type: String, default: '' }, totalCount: { type: Number, default: 0 }, user: { type: Object, default: null } } } </script>

Header.vue里没有写this.$emit('search')的处理逻辑，而是把事件抛给父组件（比如HomePage.vue）去监听，这样同一个 Header 用在分类页时，搜索行为可以跳转到分类结果页；用在首页时，搜索行为可以跳转到搜索页。参数说明：totalCount使用Number类型，如果有 undefined 的坑，可以用default: 0兜底；:value加上@input实现的是单向绑定，避免组件内部修改 prop 导致 Vue 报错。

Nav.vue一般是底部标签栏或顶部导航条，在移动端 Web 项目里更常见。它接收一个items数组作为 prop，数组每一项包含name、path和icon，然后通过router-link循环渲染。这里的要点是router-link会自动加上router-link-active类，我们可以直接用 CSS 控制选中样式，而不需要监听$route.path去手动加类。比如：

.nav a.router-link-active { color: #e8562a; font-weight: bold; }

这种基于 class 的样式方案比 JS 判断更简洁，而且不会造成组件重新渲染。注意router-link-active是部分匹配，比如/cate匹配/cate/123；如果要求精确匹配，要使用router-link-exact-active。

List.vue是商品或资讯列表的通用展示组件。它接收items数组和type参数，内部根据type决定渲染卡片样式还是列表样式。因为列表项本身需要点击跳转，所以List.vue不需要知道路由细节，只需把item原样抛给父组件：

<template> <div class="list"> <div class="list-item" v-for="item in items" :key="item.id" @click="$emit('item-click', item)" > <img :src="item.image" :alt="item.name" /> <div>{{ item.name }}</div> <div>¥ {{ item.price }}</div> </div> </div> </template> <script> export default { name: 'List', props: { items: { type: Array, required: true } } } </script>

在父组件里监听item-click事件，再执行router.push或打开详情弹窗，这样List.vue就完全复用了。这组件的缺陷是图片没有懒加载，如果首页数据超过 50 条，v-for渲染大量图片会影响性能。常见的做法是给img绑定loading="lazy"属性，但要注意loading属性在部分低版本浏览器不生效，需要引入vue-lazyload。这套源码的assets目录里只有js/logo.png/css/images，没有图片懒加载插件依赖，说明原作者定位的是轻量 demo，二次开发时再按需添加。

再看assets目录的组织。assets/js通常放一些工具函数，比如formatPrice、debounce、http.js等；assets/css放全局样式，比如reset.css或common.css；assets/images放本地静态图。如果你要改动样式，优先改assets/css里的全局变量，而不是在组件 style 里写死颜色。这里有一个常见的误区：把组件里的小图标也放在assets/images，导致每个页面都要require('../../assets/images/xxx.png')，路径非常别扭。更好的做法是把图标做成雪碧图或直接使用 iconfont，但这套源码既然已经这么放了，新加图片时保持相同规则就好。main.js入口文件里，全局 CSS 一般放在 Vue 实例化之前引入，这样各个组件优先用自己的局部样式，局部样式没有覆盖的属性会回落到全局样式。

5. 调试与构建：npm 命令、vue.config.js 和部署前检查清单

拿到源码的第一步不是看代码，而是先把依赖装起来跑通。这套项目有package.json、package-lock.json和vue.config.js，说明它是基于 Vue CLI 构建的标准工程。启动步骤通常是：

npm install npm run serve

npm install会按package-lock.json锁定版本安装，减少依赖不一致问题。如果你在安装时遇到node-sass编译失败，多半是 Node 版本与依赖版本不匹配，常见的规避方法是用npm install --legacy-peer-deps或在.npmrc里设置sass_binary_site指向国内镜像。npm run serve启动开发服务器，默认端口是 8080，如果被占用，可以用npm run serve -- --port 3000指定端口。

开发调试时我一般会打开浏览器的 Vue Devtools 检查组件树和 Vuex 状态。如果发现页面布局异常，尤其是图片错位或样式不生效，先清浏览缓存，再检查vue.config.js里的publicPath。这个配置在本地开发时影响不大，但打包之后容易出问题。常见的配置是：

module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } }

publicPath: './'表示打包后的 JS、CSS 资源都使用相对路径，这样直接双击dist/index.html也能打开，但如果你部署到子目录，比如https://example.com/shop/，相对路径也能正常解析。如果不设置，默认是/，部署到子目录时资源会 404。assetsDir把静态文件归类到static文件夹，方便缓存策略控制。devServer.proxy解决开发环境跨域问题，前端请求/api会被转发到后端服务，注意changeOrigin: true必须写，否则后端收不到正确的Host头。

打包执行：

npm run build

打包成功后检查dist目录的三个关键点：一是index.html里的<script>和<link>标签路径，如果是./static开头的相对路径，部署没问题；二是static/css和static/js文件名带哈希，说明打包生效；三是dist目录里有没有favicon.ico，这道源码的public/favicon.ico会被复制到dist根目录，页面标题栏的图标显示正确与否，往往最容易被忽略。

部署前还有一个验证步骤：本地起一个静态服务器模拟线上环境。在dist目录执行npx serve -s .，就能看到生产构建的实际效果。如果你用了mode: 'hash'，刷新页面不会 404；如果你用了history模式，这里就会暴露没有重写路由的问题，需要在serve命令后加-s参数来支持 SPA 回退，Nginx 配置里对应写法是try_files $uri $uri/ /index.html;。

最后给一个排查清单，适合发给接手这个项目的人：

这个项目更适合作为 Vue 工程化的练习底板：页面组件、路由、Vuex、公共组件、构建配置都齐全，你可以先读懂Cart.vue到store的数据流，再尝试替换成自己的土特产商品数据，最后把Header.vue的搜索逻辑改造成支持防抖的自动补全。拆完这一遍，你对 Vue 单页应用的页面拆分和状态流向就会形成自己的判断标准。

本文还有配套的精品资源，点击获取