Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Vue+Element to do a small page, the article is very detailed, has a certain reference value, interested friends must read it!

Preface

Effect.

Project structure

In this case, we can see that there are some components. Then on the whole, it is still alive after vue+elementui, and then use uniapp as a mobile terminal.

MarkDown Editor

This is our main function.

Meavon is also used as an open source Markdown component.

Then there is the upload of the article. There is a pop-up window here.

The code is as follows

Publish an article Cancel deterministic import {mavonEditor} from 'mavon-editor' / / introduce mavon-editor component import' mavon-editor/dist/css/index .css'/ / style of imported components export default {/ / register name: "writeblog" Components: {mavonEditor,}, data () {return {dialogFormVisible: false, form: {value:'', / / entered markdown html:'', / / html ruleForm:this.ruleForm transferred in time, title:',}, ruleForm: {url:', community: ", column:'' Level:'', desc:', type:'',}, rules: {desc: [{required: true, message: 'enter article description', trigger: 'blur'}, {min: 1, max: 150, message:' 1 to 150 characters', trigger: 'blur'}] Community: [{required: true, message: 'please select a publishing community', trigger: 'blur'},], level: [{required: true, message:' please select article permissions', trigger: 'blur'},], type: [{required: true, message:' please select article type' Trigger: 'change'}],}, methods: {/ / all operations will be parsed and re-rendered change (value, render) {/ / value is the actual content in the editor That is, the content of markdown, and render is the content of the parsed html this.form.html = render }, / / submit submit () {/ / Click submit to get both html content and markdown content, and then store it in the server to console.log (this.form.value); console.log (this.form.html); this.dialogFormVisible=true }, submitForm (formName) {this.$ refs [formName] .validate ((valid) = > {if (valid) {if (this.form.title=== "") {alert ("title cannot be empty") return} alert ('submittal'); this.dialogFormVisible = false Console.log (this.ruleForm)} else {console.log ('error submittal certificates'); return false;}});}, mounted () {} # center {margin-top: 5%; width: 96%; height: 96%; border: 1px;} img {margin: auto; margin-left: 30%; height: 40%; width: 40% Position: relative; top: 10%;} input {width: 85%; height: 30px; border-width: 2px; border-radius: 5px; border-color: # 00c4ff; border-bottom-color: # 2C7EEA; color: # 586e75; font-size: 15px;}

This time the front-end code is actually completely refactored. What about the stuff I wrote at the end of last semester is not as good as the Dome that I used to do directly with Django. While doing this, I turned into a personal blog, and then changed it back to the multi-person community. I didn't even get the documents right on the shelves, so I just put it broken. I was supposed to start work during the winter vacation, but the learning task was full, alas.

Message module

This is also an important module, because this message can combine several modules.

Let's talk about the label first.

How did it come from? this is actually the one in elementui.

And then our page.

The last few are actually similar.

You can read and write this directly.

Message navigation

First of all, our message navigation code.

Question and answer message, comment message, like message. Answer news article comment article like Article push system Notification Audit message Activity messages Friends verify Friends messages Set message Settings export default {name: "notices" Data () {return {}},}. El-header {background-color: # e5efe2 Color: # 333; line-height: 60px;} .el-aside {color: # 333;} .router-link-active {text-decoration: none;} .alink {text-decoration: none;} content code (message)

Empty all

{{message.from}} commented on you.

{{message.info}}

From Q & A: {{message.quiz}}

{{message.data}}

Export default {name: "aComment", data () {return {total: 999, Messages: [{"info": "Huterox is best and very handsome", "from": "Futerox", "quiz": "what if the little sister never returns your messages", "data": "2022-3-27"}, {"info": "Huterox is best and very handsome", "from": "Futerox" "quiz": "what if the little sister never returns your messages", "data": "2022-3-27"}, {"info": "Huterox is best and very handsome", "from": "Futerox", "quiz": "what if the little sister never returns your messages", "data": "2022-3-27"}, {"info": "Huterox is best and very handsome", "from": "Futerox" "quiz": "what if the little sister never returns your messages", "data": "2022-3-27"}, {"info": "Huterox is best and very handsome", "from": "Futerox", "quiz": "what if the little sister never returns your messages", "data": "2022-3-27"},]},} .message {width: 20em Overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} setting module

What's different is our setup module.

Q & A comment message reminder

Q & A message reminder

Article comment message reminder

The article likes the message reminder.

Export default {name: "noticesettings", data () {return {askcommentvalue: true, askanswervalue: true, articlecomment: true, articlethumb: true,}},} above is all the content of the article "how to use Vue+Element to make a small page". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.