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

摘要

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

项目背景说明

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

前端具体说明

前端环境说明

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

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

前端开发说明

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

cnpm install
npm run init
npm run dev

这里可能会在init时会出现一些问题,以下是我们使用的解决方案,这是同组的同学找到的
在这里插入图片描述

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

npm run build

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

以下是我们项目的结构,主要编写的是 /src/views 中的 *.vue 文件,有时需要修改 router.jsmain.jsdist 目录和 node_modules 目录是自动生成的,可以不去管它
在这里插入图片描述

总结

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js资源文件主要包括两部分:官方文档和第三方组件库。 官方文档是学习和使用Vue.js的首要资源。官方文档详细地介绍了Vue.js的各种特性、组件、指令和API。无论是初学者还是有经验的开发者,都可以通过官方文档快速上手Vue.js,并深入了解其内部原理和最佳实践。官方文档提供了多语言版本,可以选择自己熟悉的语言进行阅读。 除了官方文档,第三方组件库也是Vue.js资源文件的重要组成部分。在Vue.js生态系统中,有许多优秀的第三方组件库,如Element UI、Vuetify、Ant Design Vue等。这些组件库提供了一系列高质量的UI组件,包括按钮、表单、弹窗、导航等,可以大大加速前端开发的速度。同时,这些组件库还提供了自定义主题和样式的能力,可以根据项目需要来定制化UI风格,提升用户体验。 除了以上两部分,还有许多社区资源也是Vue.js的重要补充。Vue.js拥有庞大的社区,有很多开发者共享自己的经验、问题和解决方案。在GitHub上,有很多Vue.js相关的开源项目和代码示例,可以作为学习和参考的资源。在各种技术论坛和博客上,也能找到关于Vue.js的教程、案例和讨论。通过积极参与社区,开发者可以与其他开发者交流,互相帮助,共同提高。 综上所述,Vue.js资源文件包括官方文档、第三方组件库和社区资源。这些资源可以帮助开发者学习和使用Vue.js,提高开发效率和质量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值