项目开发你可以从这几点去回答

面试官你好，这个项目是我自己独立开发的，下面我给您介绍一下，我从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封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回到地狱的出现。
我这个项目用vuex对数据进行了共享。包括token,之前遇到过刷新页面vuex数据丢失的问题，可以用数据持久化解决，原理就是把vuex中的数据，同步到sessionStorage中，用一个插件就可以解决vuex-persistedstate。
整个项目采用组件拆分的思想开发的，开发初期，我会创建三个目录，分别是views(页面级组件目录，比如home首页,),common（公共组件目录比如：header公共头组件）,feature（功能性组件目录）,
最后遇到最大的问题是打包上线时webpack配置打包优化。优化分为代码优化，和webpack打包优化。
代码优化：

1. 使用keep-alive缓存不活动的组件
   keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
2. 使用路由懒加载
   Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
3. 图片懒加载
   对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。
4. 使用防抖节流函数优化性能
   我一般使用的是公共的方法，在js文件中加上防抖节流函数的方法，在需要的文件中导入
   函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
   函数节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

  // 防抖
 export function _debounce(fn,delay) {
   const delay = delay || 200;
  let timer;
   return function () {
     let th = this;
     let args = arguments;
     if (timer) {
       clearTimeout(timer);
     }
     timer = setTimeout(function () {
       timer = null;
       fn.apply(th, args);
    }, delay);
   };
 }
 // 节流
 export function _throttle(fn, interval) {
   let last;
   let timer;
   const interval = interval || 200;
   return function () {
     let th = this;
     let args = arguments;
     let now = +new Date();
       if (last && now - last < interval) {
           clearTimeout(timer);
           timer = setTimeout(function () {
               last = now;
               fn.apply(th, args);
           }, interval);
       } else {
           last = now;
           fn.apply(th, args);
       }
  }
 }
// 在需要的组件中引用import { _debounce } from "@/utils/public";

webpack打包优化：
5. 去除生产环境的sourceMap
sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间，productionSourceMap：false
6. 对资源文件进行压缩
需要下载 compression-webpack-plugin
7. 图片压缩
需要下载 image-webpack-loader
8. 去除console.log打印
9. 只打包改变的文件