这篇文章主要介绍了关于关于利用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-dev import '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还可以自定义工具栏，感兴趣的同学可以去看下他的源码，我是看了源码自定义的，我展示一个设置标题的举例
Sylius开源电子商务平台是一个开源的 PHP 电子商务网站框架，基于 Symfony 和 Doctrine 构建，为用户量身定制解决方案。可管理任意复杂的产品和分类，每个产品可以设置不同的税率，支持多种配送方法，集成 Omnipay 在线支付。功能特点：前后端分离Sylius 带有一个强大的 REST API，可以自定义并与您选择的前端或您的微服务架构很好地配合使用。如果您是 Symfony
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></p>
四、登录注册
之前本来只先做文章展示，但感觉用到的技能有点少，就想多做点，然后就开始做登录注册还有评论，登录注册我用的token认证，后台很简单，vue这边我挑选出一个很好的文章，推荐给大家vue+vuex+axios做登录、注册页权限拦截。看了之后对我很有帮助
五、上传GitHub
上传GitHub之后，再克隆到本地需要npm install,并 npm run dev
此时报错Error: No PostCSS Config found in...
解决办法参考postcss配置
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
