灵元素采购商、供应商是给商家和用户提供的交易管理系统，采购商包含订单中心，询价中心，认证中心等，供应商包含商品中 心，认证中心，店铺装修，询报价，活动设置等其他功能。运营平台包含商品审核，用户管理，订单中心，询报价等功能。 负责内容: 1. 通用组件编写，文件上传、svgicon 、富文本等 2. 系统优化，通过 cdn 替代部分插件，缩小打包体积，提高加载速度。 3. 日常功能维护

官网项目使用 nuxt2、vue 2和 tailwind 构建，使用i18n插件实现多语言，使用 nuxt-link 组件代替函数跳转页面，以便于网站更 好的被搜索引擎收录。通过函数 getLocaleCookie和 setLocaleCookie在 cookie 上添加当前语言字段，同时和后端约定，来实现 不同语言接口返回不同的内容。通过 nuxt的 asyncdata 生命周期请求页面的数据后，return 一个对象，此对象数据会合并到 data中，由于 nuxt的 asyncdata 生命周期处于 vue 生命周期之前，所以此时的数据会被直接渲染到页面，方便实现服务端渲 染。

灵元素化工电商是一个危化品交易平台，包含电商，采购商供应商和运营平台几个部分。网站主要功能有供应商注册，关键字搜索 普通危化品，实验室试剂，化学品百科搜索及详情，店铺详情，认证中心，商品加购，结算，支付等功能，该项目使用 nuxt 2和 vue 2构建，使用 tailwind，swiper，ant-design-vue，md5，lodash，axios，dayjs 等插件。 负责内容: 1. 登录功能，分为验证码登录，密码登录和扫码登录，验证码登录时需要对发送验证码和账号进行校验，校验通过时发送验证码并 且进入倒计时，且需要对发送验证码按钮防抖处理。登录功能分为登录页和登录弹框，与登录相关的功能作为一个单独的组件进行 复用。登录后要返回登录前页面或者刷新当前页面。 2. 搜索商品，页面公共的搜索框作为组件编写，需要在不同的页面进行复用，所以借助 vuex 缓存当前的搜索关键字，同时与 url 携带的参数保持一致，页面刷新时能保证关键字不会丢失。 3. 购物车模块购物车需要对不同状态的商品进行区分提示，例如失效，库存不足等，在选择商品进行结算时，也需要对商品的数 量进行限制不能超过最大库存，也不能低于最小购买量，勾选商品时要时时计算商品总价，确保显示的信息正确。由于不同店铺不 同的仓库之间不能合并结算，所以在单选和全选商品也要对所选商品的店铺仓库进行校验。 结算功能，结算页面需要录入发票和收货地址，并支持增删改查和选择，到支付页面之后要选择支付方式，同时要判断订单状态， 及时更新避免重复唤起支付。 4. SEO 优化，页面的 TDK 设置，根据页面内容设置不同的 TDK ，部分页面设置固定的 TDK 内容，非用户中心的内容需要服务端 渲染，与用户相关的页面采用客户端渲染，服务端渲染的页面链接跳转都采用 nuxt-link 方式，使用伪静态路径地址，新闻详情， 商品详情等页面使用动态路由而不是通过 params 携带参数。丰富页面内容，增加页面的差异性，定期提交链接等方式增加网站 收录。 5. SPM 埋点插件设计，项目中需要埋点的场景为用户的点击事件和页面跳转路径的记录。点击事件借助 vue-directive ，通过指 令获取标签上的自定义参数，收集埋点的数据，监听标签的点击事件，触发发送数据的功能。通过 router aftereach 记录页面跳 转前和访问当前的页面，然后发送数据。借助 vuex 存储每个页面定义的数据类型，减少重复的请求。