如何介绍项目呢？

介绍你的项目？

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

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

2、vuex的使用

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

3.组件拆分，开发项目

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

4.优化

最后就是优化项目，优化分为代码优化、webpack打包优化。

代码优化：
 1. 使用keep-alive缓存不活动的组件
 2. 实用路由懒加载
 3. 图片懒加载
 4. 使用函数防抖节流(性能优化)

vue-cli4打包优化
 1.去除生产环境sourceMap
 2.对资源文件进行压缩
 3.图片压缩
 4.去除console.log打印
 5.只打包改变的文件
 6.开启分析打包日志