登錄與注冊(cè)功能都已經(jīng)實(shí)現(xiàn)，現(xiàn)在是時(shí)候來(lái)開(kāi)發(fā)文章編輯功能了。

這里咱們就使用 markdown 作為編輯語(yǔ)言吧，簡(jiǎn)潔通用。那么我們就需要找一下 markdown 的編輯器組件了，而且還要支持 vue噢。

若羽這里找到的一個(gè)是 mavonEditor，在 github 上有2k+ 的 star。文檔也都是中文的，比較友好。

mavonEditor地址

添加組件 && 新建編輯組件

首先來(lái)安裝一下編輯器：

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')

接下來(lái)新建我們的編輯組件了，Edit.vue:

<template><div></div> </template><script>export default {name: "Edit"} </script><style scoped></style>

然后為它添加路由對(duì)象：

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

編寫(xiě)視圖代碼

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

• 標(biāo)題
• 內(nèi)容

最基本是需要這兩個(gè)要素的。

data 中定義這兩個(gè)要素：

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

在布局上我們依舊延續(xù)之前的簡(jiǎn)約風(fēng)，使用 ElementUI 進(jìn)行布局。但這里我們不居中了，直接填滿全屏就好。

代碼：

<template><div><el-row><el-form><el-form-item label="文章標(biāo)題"><el-col :span="6"><el-input v-model="model.title"></el-input></el-col></el-form-item><el-form-item><el-col><mavon-editor v-model="model.content"></mavon-editor></el-col></el-form-item><el-form-item><el-col><el-button type="primary" size="small" @click="submit">發(fā)表</el-button></el-col></el-form-item></el-form></el-row></div> </template><script>import axios from 'axios'export default {name: "Edit",data() {return {model: {title: '',content: '',}}},methods: {submit() {axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/publish', this.model).then(res => {if(res.data.Code === 200) {this.$message.success('發(fā)布成功');}})}}} </script>

效果如下：

寫(xiě)在后面

這個(gè)頁(yè)面也還確實(shí)了一部分功能，在發(fā)布完成后，應(yīng)該是要跳轉(zhuǎn)到文章列表的頁(yè)面去查看所有的文章。

因?yàn)榱斜眄?yè)面還沒(méi)有做，所以這里暫時(shí)先挖個(gè)坑放著~

本篇博文使用了第三方組件，也是在演示如何使用第三方組件來(lái)為自己提高開(kāi)發(fā)效率，畢竟不可能所有的東西都自己來(lái)從0實(shí)現(xiàn)，那多累，還不一定能保證完善。部分第三方組件無(wú)法滿足的功能就可以考慮自己來(lái)實(shí)現(xiàn)了。

轉(zhuǎn)載于:https://www.cnblogs.com/By-ruoyu/p/11197259.html

總結(jié)

以上是生活随笔為你收集整理的浅入深出Vue：文章编辑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。