大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容介绍了“怎么用Vue搭建个人博客”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联是一家专业提供东川企业网站建设,专注与网站设计、成都做网站、H5建站、小程序制作等业务。10年已为东川众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
接下来我们开始前后端环境的搭建。首先,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搭建个人博客”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!