一、前言以及需求分析
对于编程新手而言,个人博客是一个十分适合入门的实战项目,通过个人博客的搭建将所学的理论知识付诸实践,在实践中不断发现问题以提高自己的技术能力水平。本系列专栏将从基本的搭建Vue项目开始,到整个博客的前端开发的完成,完整的记录本次项目开发的历程和遇到的问题。所有的代码都是从需求的角度出发,个人博客项目的大致需求如下。
1、登录注册功能
2、发表博客
3、收藏博客
4、搜索博客
5、删除博客
6、按分类或者标签查看博客
7、个人信息的修改
8、留言评论回复功能
二、搭建vs code+Vue环境
构建Vue的开发环境是我们所要做的第一步,目前在社区内关于如何搭建vs code +Vue的技术文章很多,大家可以搜索相关文章完成开发环境的搭建。个人觉得这位博主的相关文章值得一看,不仅说明了如何进行环境的搭建,还进行了相关原因的说明解释。
http://t.csdn.cn/6xk1Whttp://t.csdn.cn/6xk1W在完成环境的搭建后以及相关的依赖项安装后,新建终端命令运行npm run dev,再使用ctrl+鼠标左键点击端口链接弹出如下页面证明Vue项目初始化创建完成。
在项目文件夹内,我们可以得到如下的项目文件夹目录:
关于每个文件夹的功能可以参考本人在Vue学习技术中的第一篇博客。
三、关于ElementUI插件
Element UI是由饿了么公司前端团队开源的基于 Vue 2.0 的组件库,提供了一套基于PC端的前端设计资源,能够帮助网站快速成型。在本项目开发中使用此组件库将会提高我们的开发效率。
根据官网的介绍,本组件库有一下特点;
一致性 Consistency
● 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
● 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
反馈 Feedback
● 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
● 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
● 简化流程:设计简洁直观的操作流程;
● 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
● 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
可控 Controllability
● 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
● 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
以上关于Element组件库引用的特点总结参考下面的博客文章。
http://t.csdn.cn/HTLrWhttp://t.csdn.cn/HTLrW本篇博客到此结束,未完待续。