如何项目介绍？

绝地灬酷狼 2022-11-22 00:03 109阅读 0赞

介绍你的项目？

1.  多环境变量，axios请求响应拦截，api封装统一管理

> 面试官你好，《xxx》这个项目是我自己独立开发的，下面我给您介绍一下，我从0开始，到发布上线的流程。首先，开发这个项目我用的最新的vue脚手架3.0，项目创建完后，首先我会配置多环境变量，方便后期测试，上线阶段快速切换后台接口。然后安装配置项目所用的ui框架（后台管理系统element-ui,移动端vant-ui）,之后安装axios，对axios进行封装，添加请求拦截，和响应拦截，我一般在请求拦截器中,给请求头添加token字段。当然这个token要存储在vuex中（稍后会降到），还有loding动画的开启，响应拦截器中，我一般会关闭请求时开启的动画，根据后端返回的状态码（code值），验证token是否有效或过期（一般401表示token无效，402表示token过期）。接着我会用封装好的axios进行api接口的封装，这里我用到了async、await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回到地狱的出现。

1.  vuex使用

> 我这个《xxx》项目用vuex对数据进行了共享。包括token,购物车中的商品数据，商品类型，商品总价，商品订单，收货地址，等。之前遇到过刷新页面vuex数据丢失的问题，我查阅资料，可以用数据持久化解决，原理就是把vuex中的数据，同步到sessionStorage中，用一个插件就可以解决vuex-persistedstate。

1.  组件化拆分，开发项目

> 整个项目采用组件拆分的思想开发的，开发初期，我会创建三个目录，分别是views(页面级组件目录，比如home首页,category分类,detail详情，cart购物车,myself个人中心),common（公共组件目录比如：header公共头组件,swiper轮播组件,item商品信息组件,list上拉列表组件）,feature（功能性组件目录，比如toTop返回顶部组件，search搜索组件，sku商品规格组件等）,  
> 列举5个重要的组件说下。

1.  支付

> 最后遇到最大的问题是支付，和打包上线时webpack配置打包优化。

> 先说下支付吧，支付主要做了支付宝支付，和微信支付。我给您重点说下支付宝页面支付吧。当我们选中支付吧支付，点击确定按钮，页面跳转到支付宝页面，进行支付。  
> 详细看[vuex项目中的微信支付、支付宝支付  
> ][vuex_]

1.  优化

> 最近就是项目优化，优化分为代码优化，和webpack打包优化。  
> 代码优化详看：[vue项目代码优化][vue]说出4点即可，webpack打包优化想看[webpack打包优化][webpack]说出4点即可。

无敌中。。。记住老湿的话。保你面试成功。

[vuex_]: https://editor.csdn.net/md?not_checkout=1&articleId=109457516
[vue]: https://blog.csdn.net/weixin_43638968/article/details/109100958
[webpack]: https://blog.csdn.net/weixin_43638968/article/details/109093199