使用VueJs开发SPA应用

· 2017-02-10 · # Vue

对于近年来火热的SPA 我们可以有多种解决方案现在我们可以尝试着用vueJs去开发我们的SPA应用

因为最近自己正在开发类似知加这样的一款应用利用好自己已学的vueJs和SPA相关的知识 😝

介绍

因为最近也在学习和开发自己的SPA应用项目开始也有一段时间了整个过程实现起来还是会有点问题的当然写代码这也是一个过程啦

1.集成`UEditor`

1.其实有很多这样的文本编辑器例如我找到的两款:

UEditor 也就是我准备引入的富文本编辑器
Quill 个人感觉还是比较好看的 😝

但我发现好像还是百度的UEditor用的比较多点其实自己也想到就是文档资料找起来比较方便这样处理问题也很快

当然后面的话我还是想再去集成其他的文本编辑器尽管这款编辑器功能还是很强大的但是我发现我并没有这么多的需求顺便也多一种体验嘛
(功能和样式选项都是可以配置的在下面我也会给出我的一些配置项)

官方配置文档

2.开始集成UEditor

来到我们的官网的下载http://ueditor.baidu.com/website/download.html 我下载的是
PHP最新版本的因为后端处理还是会交给PHP去处理

下载完成后我将文件放在了根目录的static文件夹下

然后去components文件夹下我在公共目录common(这是我自己创建的)创建了Ueditor.vue组件
内容期初是这样:

<template>
    <div id="ueditor">
        <div ref="editor" id="editor"></div>
    </div>
</template>
<script>
    import '../../../static/ueditor/ueditor.config.js'
    import '../../../static/ueditor/ueditor.all.js'
    import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
    export default{
        data(){
            return{
              edtior: null
            }
        },
        mounted() {
            this.editor = UE.getEditor(this.$refs.editor.id);
        },
        beforeDestroy() {
            if(this.editor) {
            this.editor.destroy();
           }
        },
        components:{
        }
    }
</script>

当然这个时候是引用不到的还得去配置一下UEDITOR_HOME_URL(文件路径)
这个实在集成进来的UEditor下面的ueditor.config.js里面:

 // var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    var URL = window.UEDITOR_HOME_URL || "/static/ueditor/";

最后可以在页面看到成功显示:

如果显示加载文件路径问题基本上是UEDITOR_HOME_URL路径的配置出错了

3.配置富文本编辑器
先去配置下前端的内容(后端的话主要涉及到图片的上传等)

这里我集成了JellyBool在github上的一个Package https://github.com/JellyBool/simple-ueditor

对样式图标进行了一定的优化(你可以直接拿过来替换你的ueditor文件目录就行当然还是要去配置一下前面提到的文件路径)

最后的效果大概是这样的(这里以集成到我的项目里为例)

我个人在学习Laravel时就是在JellyBool这位大神的站点Laravist学习的给了我很大的触动也学习到了不少的知识和想法
真的觉得对于技术和学习是一件你只要愿意花时间花精力你就会体会到你想要的充实感和快乐 Fighting!!! 😆

接下来即使最基本的登录注册过程这个在之后我会给出了解决方案

项目总是一步一步来进行期间肯定会遇到各种的坑但肯定也会学习到很多这篇也算是开个好头吧

登录注册

使用VueJs开发SPA应用

介绍

1.集成UEditor

1.集成`UEditor`