浅入深出Vue：文章编辑

登录与注册功能都已经实现，现在是时候来开发文章编辑功能了。

这里咱们就使用 markdown 作为编辑语言吧，简洁通用。那么我们就需要找一下 markdown 的编辑器组件了，而且还要支持 vue噢。

若羽这里找到的一个是 mavonEditor，在 github 上有2k+ 的 star。文档也都是中文的，比较友好。

mavonEditor地址

添加组件 && 新建编辑组件

首先来安装一下编辑器：

npm install mavon-editor --save

然后在 main.js 中引入组件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(mavonEditor)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

接下来新建我们的编辑组件了，Edit.vue:

然后为它添加路由对象：

{
    path: '/edit',
    name: 'edit',
    component: () => import('./views/Edit.vue')
}

编写视图代码

首先一篇文章有哪些要素：

• 标题
• 内容

最基本是需要这两个要素的。

data 中定义这两个要素：

data() {
    return {
        model: {
            title: '',
            content: '',
        }
    }
}

在布局上我们依旧延续之前的简约风，使用 ElementUI 进行布局。但这里我们不居中了，直接填满全屏就好。

代码：

效果如下：

写在后面

这个页面也还确实了一部分功能，在发布完成后，应该是要跳转到文章列表的页面去查看所有的文章。

因为列表页面还没有做，所以这里暂时先挖个坑放着~

本篇博文使用了第三方组件，也是在演示如何使用第三方组件来为自己提高开发效率，毕竟不可能所有的东西都自己来从0实现，那多累，还不一定能保证完善。部分第三方组件无法满足的功能就可以考虑自己来实现了。