科技专家资源共享平台 项目前端简介—Vue.js

摘要

前段时间小组合作开发了一个项目——科技资源共享平台，我和其中的几个同学负责前端的部分，采用了iview框架（Vue.js），现写一个简单的说明，希望能够帮助到大家。

项目背景说明

本学期我们系统分析与设计课程的大作业是小组开发一个科技专家资源共享平台，目的是通过该平台能够对专家，论文进行搜索与收藏，方便资源的获取。
我们使用的框架是后端的 flask ，前端的 Vue.js 以及数据库的 MangoDB ，同时，后期为了搜索的便捷性，采用了 ElesticSearch 。由于我负责的是前端部分，所以对于其他内容不进行讨论，现简单说明前端的工作。

前端具体说明

前端环境说明

由于是在大约一个多月前配置的环境，所以难免有些遗忘，请见谅。
因为我们选择了 Vue.js 作为前端的框架，所以参考了官方的文档，Vue.js的作者尤雨溪是中国人，所以文档还是有全中文的。这里是官方文档的链接。同时参考了组件库iview，这里是官方网站

首先为了方便开发过程中的调试，我们根据官方文档说明在Chrome上安装了 Vue Devtools 插件。对于项目本身，首先需要 Node.js，这个直接在官方网站下载即可，同时使用cnpm安装了 vue 和 vue-cli（由于npm过慢，所以使用cnpm），这里的安装步骤不多赘述。

前端开发说明

项目是基于iview-project开发的，在ivew的官网或者GitHub上都可以找到。运行该项目只要在项目根目录使用下述命令即可

cnpm install
npm run init
npm run dev

这里可能会在init时会出现一些问题，以下是我们使用的解决方案，这是同组的同学找到的

后期需要上传服务器的话使用如下命令进行打包

npm run build

关于具体的打包上传方法，可以参考同组同学写的博客 iview 项目打包记录

以下是我们项目的结构，主要编写的是 /src/views 中的 *.vue 文件，有时需要修改 router.js 和 main.js ， dist 目录和 node_modules 目录是自动生成的，可以不去管它

总结

以上就是这次项目的简要说明，总之，在项目具体开发过程中还是需要不断查看iview的组件库的文档以及各种大神们写的解决各种问题的博客。整体项目的开发虽痛苦但是也学到了很多知识。

以下是我们项目前端ZebraScienceFrontEnd的GitHub地址，有兴趣的可以去查看，欢迎各位交流学习
ZebraScienceFrontEnd(https://github.com/tygkking/ZebraScienceFrontEnd)