基于Vue.js的个人博客项目前端开发（一）

一、前言以及需求分析

对于编程新手而言，个人博客是一个十分适合入门的实战项目，通过个人博客的搭建将所学的理论知识付诸实践，在实践中不断发现问题以提高自己的技术能力水平。本系列专栏将从基本的搭建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本篇博客到此结束，未完待续。