你，能独立完成项目吗？

前言

又快到了金九银十的找工作季节，相信不少小伙伴最近都在努力的学习，相对于前端的三座大山，this，闭包这类问题，相信不少小伙伴最怕问到的就是你能不能独立开发项目，面试官的言外之意，就是你自己能不能搭建项目，而相对于只有一到三年的前端开发小伙伴，公司很少会接触到项目的构建到部署，大部分的精力都是在写业务逻辑代码上面。因此对这一块也比较陌生。

仓库地址以及效果

// git仓库地址
https://github.com/PlutoFrom20years/vue-phone-rem.git

技术栈的选择

vue作为现在主流框架之一，其生态也是发展的一片祥和，基本上前端只要掌握了一门主流框架，就能找到工作了，当然，深入研究一门框架也是非常有必要的，下面对主要涉及的技术栈做一个简单说明

• eslint 代码检查
• vant 移动端ui框架
• axios 基于promise的http库
• vue-router 路由管理器
• lib-flexiable 据说是淘宝出品的rem适配，本质上就是一段js代码而已，看了下四年没有更新了，不过不影响，这里提一嘴，rem单位是根据html的根字体的变化而变化的，比如根字体的大小为10px，那么1rem就是10，我们可以通过媒体查询，或者监听window的onresize等方法，获取到窗口的大小，然后根据比例关系去动态的设置html的根字体，从而实现rem布局，不太熟悉的朋友可以去看看相关资料，这里不做过多说明了
• postcss-pxtorem 将项目中的px单位统一转成rem，因此在开发的时候，不需要写rem，直接写px也可以，当然还有一些其他的开发工具的插件，比如vscode的px2rem等也是能做到自动换算的，由于移动框架使用的是vant，内部组件写的也是px，为了让vant也能rem适配，因此下了这个工具

关于包的一些说明

其实不少经验不是很多的小伙伴，对包的依赖性都很强，每做到一个不太熟悉的功能，立马想到插件解决，其实这并不是一个很好的开发习惯，会让你的项目也产生很强的依赖性，而且我还见过很多小伙伴，开发的时候装了好几套ui框架，可能用到的只是一个很小的功能，这不仅会让你的项目变的臃肿，而且还会让代码产生很多未知性。我个人觉得包的安装应该尊重以下几个维度

• 是否非装不可，比如我只想要用lodash里面的一个去重函数，这时候完全可以去util里面封一个，而不是去安装lodash
• 包是否安全可靠 找下载量大的以及大厂的团队写的包，下载量大，说明好用，大厂的团队？嗯，说明实力以及维护性

vue create dir 后我们应该做些啥

脚手架生成项目给我带来了不少便利，webpack的配置等很多集成配置都内部配置好了，但是距离我们真正的项目还是 有点距离的 从大的方向来看，我们应该至少有以下几点
环境配置
假设我有三个不同的环境，prod生产环境，test测试环境，dev开发环境，每个环境对应的的api和端口都不一样，我们生成项目之后该如何进行配置呢

根目录下面，我建立四个文件，三个环境为啥要对应四个文件呢，这里多一个.local文件，在你本地的时候，优先级是最高的，而且在.gitinore的文件中，应该忽略掉，这样做的好处就是，不影响其他人的开发，每个人只管本地。要注意的是，为了让你的配置文件生效，package.json里面也需要传入想要的mode ，我这里传的是dev，环境的配置vue-cli的官网有详细的说明，请移步
vue/cli环境配置

vue.config.js的个性化定制

由于vue/cli的3.X版本之后便不再暴露webpack的配置，需要配置我们项目的一些个性化方案，官方提供了一个vue.config.js的配置，当然官方文档有很详细的说明，这里我只做了一些简单的配置，大家还是要对官方文档有一个熟悉，配置很多，用得到的时候能想到去哪里查看文档 vue/cli参数配置

代码风格.editorconfig
vue/cli 4版本后生成了一个.editorconfig文件，来配置代码风格，目前市面上大多数的代码编辑器都是支持的，不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而.editorconfig正是它的默认配置文件，没有找到官网的说明，但是网上这类的介绍还挺多的，大家感兴趣的可以自行去搜一下

eslint代码规范配置
我这里直接在package.json里面配置的，配置的方式有很多种，也可以单独建立一个eslint的文件进行配置，很多博客都写的很不错，大家可以参阅

项目配置config.js
主要对环境变量以及一些版本号日期做了导出，方便后面使用

-----------------华丽的分割线-----------------------------------------------------------------------------------------------------
以上以及做了一些项目基本的开发配置，正所谓，工欲善其事必先利其器
下面讲一些和工程开发相关的
src作为我们的工程目录，我在这里分了四个文件夹

api 文件夹
主要用来放我们的和后台交互的一些请求，可以根据页面进行划分，最后统一用index.js做模块化导出

写了一个post请求和一个get请求的demo，当然这个是掉不通的，api依赖于我们的http服务，aixos我们会在http里面进行封装，这里大家先看下就好
assets
静态文件的存放，我这里是分了三个文件夹，css，font，img 主要用来存放全局的css文件，例如初始化文件，以及一些全局的css变量，还有字体图标，图片等，在相应的文件里面都有案列

components
用于存放我们的vue组件，当然里面还可以继续根据项目的复杂度进行细化，我这里封装里一个底部导航

pages
路由页面，方便维护一般和你路由相对应，这没啥好说的

router
路由管理，这里引入并注册路由，一般可根据项目的复杂度，里面可进行更加细化的划分，最后用index.js统一导出

services
服务类，提供http，util等工具服务，最后用index.js导出

http封装了一些基本的网络请求，通过promise对axios又进行了一层封装，提供了请求拦截和响应拦截的逻辑等函数，api文件那边需要用到
unit目前就提供了一个md5加密

main.js
对组件引入挂载等，并做了路由拦截，无匹配路由统一404等

总结

自此一个项目的完全架构已经过了一遍，相信大家对每个文件的作用也有了一个认识，但是看教程和自己操作总是有很多差距的，大家可以代码拉下来自己看每个模块对应的代码，其中有 不足之处也烦请指出，祝愿大家，都能找到理想的工作，码字不易，还请大家给个关注，谢谢～