BLOG

项目介绍

本项目做一款多人共享博客，包含首页、用户文章列表、详情、登录、注册、个人管理、编辑、发布等功能。

技术栈：vue-cli/vue2/axios/vue-router/vuex/es6/npm

静态页开发

如何组织项目架构

1. 把header ，footer，放到每一个页面里；
2. 把header 放到app里，因为里面可能有对应的逻辑（判断用户是否登录状态）来展示不同的状态，所以需要封装成公共组件。

选方案2

1. 定义组件，去APP.vue中去使用；
2. 选用grid布局，先在APP.vue中定义出大的布局(控制页面结构)，再在每个页面中个性化布局；
3. 做响应式；
4. 增加通用样式，基础变量；
5. 完善公用组件；
6. 写各个页面的html，css ，注意html语法，能省则省。

使用vuex完成auth模块

1. 合理拆分，模块化vuex；
2. 在组件中使用mapActions 等辅助函数将组件的methods 映射为store.dispatch 调用；
3. 改变state后，再去业务层做一些操作。

整体流程

登录页：v-model进行双向绑定，输入登录信息后点击登录，执行对应的方法，将methods中的方法通过mapActions函数映射到store.dispatch 的调用，执行actions中的login，修改state并保存数据，头部样式通过映射的方法绑定了state中的数据，变为了登录后的状态，此时在调用底层封装好的api，把登录信息作为参数传递进去去发送请求，获取到数据后.then执行业务层的逻辑：登录成功跳转至首页，首页的头部变为登录后状态。

路由完善、异步加载、权限控制

编译打包后的问题

第一次进入首页时，js会全部加载出来，速度很慢

优化

让模块懒加载，第一次进来时速度更快

首页，详情页，创建博客等功能的实现

1. 创建博客；
2. 首页：进来后发个请求，渲染页面；
3. 详情页：定义数据，修改模板，获取数据，渲染显示。

插件的使用

定义插件（单独js文件），用install绑定到Vue的原型上，在main.js中去引入，并通过Vue.use去使用，这样实例上就有了这个插件，就可以直接去使用了

用户页，我的页，编辑页等功能的实现

1. 用户页：定义页面上需要的数据，组件创建时填充数据（发送请求），获取数据后展示到页面上；
2. 我的页：删除功能-弹窗的使用，删除后-数据实时更新；
3. 编辑页：编辑时要获取到当前博客的信息。