个人开源项目（vueapp）的一些总结项目地址https://github.com/BYChoo/record项目介绍本项目名称为：Record。是一款采用Vue全家桶（vue、vue-router、vuex）+axios+express+mongodb技术栈开发的校园考勤网站，专为教师定制。网站目前实现了登录注册、日历、导入文件（csv）、考勤、导出缺席名单等核心功能。关于项目结构刚开始做这个项目的时候，考虑到项目本身并不复杂，视图层只有六七个视图层，所以我把所有的视图层组件都放在components文件夹下。然后在components文件夹下新建一个common文件夹，用来放置复用的组件。这适用于小型项目（像这样）。不过考虑到本站以后可能会部署上线，为了方便维护，我还是花了一些时间重新梳理了整个项目结构：Components：新建views文件夹，放置视图层的组件，如果每个视图层需要如果使用的子组件很多，也可以创建一个以这个视图层为核心的文件夹，然后在这个文件夹中创建一个childrens文件夹来放置子组件。可复用组件：项目中所有复用的子组件都放在components中一个统一的HTTP请求：新建一个APIs文件夹，以视图层为起点创建每个视图层需要的.js文件。全局方法：新建一个utils文件夹，放置method.js文件。vue-cil构建的项目中有两个文件夹可以放置静态资源：static和src文件夹下的assets，static文件夹下的静态资源不会被webpack打包，src文件夹下的assets为静态资源,你应该考虑把它们放在哪里合适。关于http请求，不知道大家写过这样的http请求//这个http请求是对xxxthis的请求。$http.get('/api/demo').then((res)=>{//dosomething}).catch((err)=>{//throwerr})这样写一个请求是没有问题的，但是如果这个http请求需要多次使用怎么办？每次都写这么长的代码列表，有点不雅。为了解决这个问题，我决定把request抽取出来，把每个view层作为每个.js文件，把每个http请求封装成一个函数然后导出，像这样：/***index.js*/constgetCaledarDay=function(params){returnnewfetch({//fetch是一个http请求实例url:'/api/get_caledarDay',method:'get',params})}export{getCaledarDay};//导出函数/***index.vue*/...import{getCaledarDay}from'api/index.js';//importfunctions...这样写可以有效避免http请求多路复用的问题关于状态管理关于数据状态管理一直是我在开发Vue项目时不得不考虑的问题。一般是否使用vux状态管理（vuex）都离不开这个考虑：组件间数据共享的问题。如果需要跨组件共享的数据又大又大，那直接用vuex就好了，别想了。但是，如果组件之间共享的数据不多（酌情考虑多的概念），那么父子组件和非组件之间也可以通过prop、$emit、$on等事件传值-父子组件。vuex编译后大小为25kb关于csv文件上传导出功能CSV文件上传导出可以说是这个项目最关键的一点。在开发过程中上传csv文件的过程中，我发现了几个可以解析csv文件的包：node-csvline-readerfs其中，我使用了node-csv类库进行开发。毕竟是专门在node里面用来解析csv文件的。包。另外，我还使用了formidable包来模拟前端上传的表单的解析。如果不这样做，前端帖子的csv文件将不会被接受。有了formidable和node-csv，开发起来很开心。对于导出csv文件的部分，我使用了file-saver包来模拟csv文件的导出下载。如何使用它可以在github上阅读，那里写得很详细。
