基于vue.js+element-ui组件开发的博客blog详细步骤

---

一、前端项目初始化步骤

1、通过vue cli3创建项目

通过vue ui命令进行可视化创建项目

• 选择创建的路径 -> 自定义配置项目 -> 安装babel/router/使用配置文件 -> 是否使用history模式的router，不选，默认使用hash模式的router

Vue路由的hash模式和history模式
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash
模式下，仅 hash 符号之前的内容会被包含在请求中，如
http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如
http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404
错误。V