史上最全XXX项目介绍（话术版）

---

背的最少、说的最好。你的面试我帮你

---

项目背景

面试官您好,我给您介绍⼀下最近我所在公司里做的项目。这个项目的名字叫x x x,这是一个 X X 样的项目(商城、金融、旅游、教育等)。这个项目用到的技术栈有·vue-cli4+vue2.5+vuex+vue-router+axios+vant-ui+sass+rem等。这个项目开发周期x个月。我去这家公司的时候公司项目刚起步，我去了之后主要是负责项目的xxx页面以及xx功能的开发. 我当时的这个项⽬小组,前端 就我一个人,后端3个人,产品和测试各1⼈人。

---

项目所使用的技术

vue-cli4+vue2.5+vuex+vue-router+axios+vant-ui+sass+rem

---

负责的内容

（独立开发整体项目）

---

项目搭建

首先我们搭建脚手架，通过vue create 项目名命令即可下载，需要注意的是不使用history路由模式，sass选择node-sass，配置文件使用单独管理，其中需要选择的有vuex和vue-router，就可以给我们进行自动配置初始文件，我们不需要改动，可直接使用，后期如果需要别的配置可单独添加。这样我们一个简单的脚手架就搭建完成了。

搭建完成脚手架后我们就先需要对多环境变量进行配置。首先在 package.json 里的 scripts 中配置 serve stage build 来执行不同的环境，接下来在根目录中新建对应的文件（.env.development 本地开发环境配置）（.env.staging 测试环境配置）（.env.production 正式环境配置）为了修改起来方便，不需要重启项目，我们新建一个config文件夹，在里面创建相对应的 js 文件配置对应环境的变量，在config下的index.js中导出，然后去main.js中引入使用。到这里多环境变量就配置好了。

项目中我们肯定还需要进行请求接口，为了避免麻烦，方便日后维护，我们进行axios和接口的封装。在项目的src目录中，新建一个utils文件夹，然后在里面新建一个http.js用来封装axios。配置环境的切换，设置请求头，请求超时，添加请求拦截器和响应拦截器，添加一些常用的请求方式如post、get 、put，在新建一个api.js文件封装api接口，以上 关于axios 和接口 基本搭建就完毕了。

当然了项目中一些样式我们是需要用到vant组件来进行布局，下面我们配置vant按需引用。先下载babel-plugin-import插件，然后新建babel.config.js文件做配置信息最后新建一个plugins文件夹里面新建vant.js文件来统一管理组件，用哪个引入哪个，无需在页面里重复引用。

其中不乏会有一些样式是需要自己布局的，我们为了节省时间加快效率可以对sass封装。先创建一个global.scss文件做一下样式清除，和公共的一些样式美化。在创建一个mixins.scss文件存放一些比如清除浮动或者多行文本溢出的公用样式，这些都是每个项目会用到的东西，所以配置好了放入项目中直接进行调用即可。

最后我们还需要进行移动端适配，主流的有rem和vm两种，在这个项目中我用的是rem。先下载lib-flexible postcss-plugin-px2rem这两个插件，然后创建vue.config.js文件进行配置，最后在main.js 文件中导入： import "lib-flexible/flexible";就可以用啦。

到这里我们项目的基本配置搭建就全部完成啦

---

项目功能

（教育类：如 查询课时，预约课程等等）

---

项目难点

（都记录在我的博客当中）

---

解决方案

（比如查阅资料）

---

项目总结

（如何优化，有什么收获）