怎么用Vue搭建个人博客

本篇内容介绍了“怎么用Vue搭建个人博客”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

                最近心血来潮在开发个人博客网站，刚好可以趁这个机会出一个系列文章讲讲前端界面的设计，后端业务逻辑的实现以及前后端的交互。具体的架构我是采用Vue.js + Node.js + mysql。前端界面设计使用了element-ui和mavon-editor，后端依旧使用了express框架。首页效果和文章发表界面效果如图所示：

        接下来我们开始前后端环境的搭建。首先，Node.js与mysql的安装我就直接跳过了，下载下来安装next到底就可以安装成功。我们首先在全局安装vue-cli脚手架，命令为：

npm install vue-cli -g

        接着使用vue-cli搭建一个vue2.0项目，命令：

vue init webpack vue_demo

        集成的功能我暂时只选择了vue-router。eslint和unit tests我暂时都没有选择安装。然后就可以启动vue项目了，命令为：

npm run dev

        到这里我们前端vue环境暂时告一段落。接下来我们搭建express项目。首先全局安装express生成器，命令为：

npm install express-generator -g

        然后使用express-generator快速搭建一个express项目，命令为：

express article_demo

        然后按照提示进入项目安装依赖，依赖安装成功就可以启动项目。

        express到这里也搭建成功了，但是我们需要对express进行适当的配置：连接数据库以及发起请求的公共方法。首先在项目根目录创建config.js文件用于存放数据库配置信息以及公共参数。

        然后在项目根目录创建db文件夹，在db文件夹下创建mysql.js用于mysql数据库连接的初始化和增删改查方法的封装：

        在项目根目录下创建util文件夹，存放公共方法。在util下创建postHelper.js文件，用户封装request请求。我们调用第三方API比如微信精选文章时需要发起请求：

        然后在util下创建common.js文件用于存放全局公共方法，比如注册密码加密，接收前端传参等方法：

        在util下创建bootloader.js用于封装全局log方法以及接口返回参数正确和错误返回格式封装：

        打开根目录下的package.json文件，添加apidoc的配置。apidoc用于自动根据接口注释生成接口文档：

        最后打开app.js文件，设置允许跨域请求。目前本地测试我设置允许所有域名都可以跨域访问：

“怎么用Vue搭建个人博客”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！