这篇文章主要介绍了关于关于利用vue-laravel前端和后端分离写一个博客的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
这段时间学习vue，写了个小博客，后台接口用的laravel，过程中遇到过很多问题，在此总结一下，并附上代码链接：(我还没有买域名，所以大家只看代码就好)
https://github.com/rencong/bl...
https://github.com/rencong/bl...
一、分页我知道网上有很多写好的分页组件，但是我的初衷是学习，不求快，所以我自己写的，遇到的问题是组件之间的双向绑定。
我在list页面调用paginator组件,并将分页信息传给它，结果paginator组件props的属性不变化。
原因是组件内不能修改props的值，同时修改的值也不会同步到组件外层。
同步组件外对props的修改：
props: ['current', 'last'],watch: {   current(val) {//监听current的变更，并同步带currentpage中       this.currentpage = val;   },   last(val) {       this.lastpage = val;   }},data() {   return {      currentpage: this.current,          lastpage: this.last   }}
这里我只需要同步paginator外对props的修改，如果需要通知到paginator外，请参考如何在vue2中实现组件props双向绑定
二、markdown编辑器觉得segmentfault的富文本编辑器很好看，找了个相似的，就是simplemde
附上翻译的比较全面的simplemde的配置
使用过程中，觉得很有帮助的一篇文章是simplemde编辑器 + 提取html + 美化输出
唯一注意点是vue中引入fontawesome用以下代码
npm install font-awesome --save-devimport 'font-awesome/scss/font-awesome.scss'
可以用npm、bower或cdn引入
npm install simplemde --save
bower install simplemde --save
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"><script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
这里我在laravel里用的很顺，就像github上说的步骤一样，但是在vue中，利用v-model怎么都获取不到富文本中的内容，最后研究结果是需要自己手动获取编辑器的内容，并赋值给变量。
this.markdown = new simplemde({...});//获取编辑器的值savearticle() {    this.params.content = this.markdown.value();}//给编辑器赋值this.markdown.value(this.params.content);
另外simplemde还可以自定义工具栏，感兴趣的同学可以去看下他的源码，我是看了源码自定义的，我展示一个设置标题的举例
this.markdown = new simplemde({      autodownloadfontawesome: false,      element: that.$refs.markdowncreate,      status: false,      toolbar: [          {               name: 'title1',               action: function customfunction(editor) {                  var cm = editor.codemirror;                  that._toggleheading(cm, title, 1);               },               classname: 'glyphicon glyphicon-align-left',               title: 'title1'          },          {              name: 'title2',              action: function customfunction(editor) {                 var cm = editor.codemirror;                 that._toggleheading(cm, title, 2);              },              classname: 'glyphicon glyphicon-align-left',              title: 'title2'          },      ]});_toggleheading(cm, direction, size) {    if (/editor-preview-active/.test(cm.getwrapperelement().lastchild.classname))       return;    var startpoint = cm.getcursor(start);    var endpoint = cm.getcursor(end);    var textnew = '';    for (var i = startpoint.line; i <= endpoint.line; i++) { (function (i) { var text = cm.getline(i); textnew += text; })(i); } if (size === 1) { textnew === '' ? textnew = "标题文字\n====" : textnew += "\n===="; } else if (size === 2) { textnew === '' ? textnew = "标题文字\n----" : textnew += "\n----"; } cm.replaceselection(textnew); cm.focus();}
三、vue显示高亮vue和laravel引入highlight还有点不一样
laravel中这样引入
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css"><script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script><script>hljs.inithighlightingonload();</script>
vue中这样引入
<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css"><script src="http://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>main.js中vue.directive('highlight', function (el) {    let blocks = el.queryselectorall('pre code');    blocks.foreach((block) => {        hljs.highlightblock(block)    })});
用法是<p v-html="marked" v-highlight>
四、登录注册之前本来只先做文章展示，但感觉用到的技能有点少，就想多做点，然后就开始做登录注册还有评论，登录注册我用的token认证，后台很简单，vue这边我挑选出一个很好的文章，推荐给大家vue+vuex+axios做登录、注册页权限拦截。看了之后对我很有帮助
五、上传github上传github之后，再克隆到本地需要npm install,并 npm run dev
此时报错error: no postcss config found in...
解决办法参考postcss配置
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
laravel中macroable宏指令的用法
关于如何短时间内搭建一个restful资源服务器的方法介绍
以上就是关于利用vue-laravel前端和后端分离写一个博客的方法的详细内容。