怎么用Vue+Element做個小頁面

這篇文章主要介紹怎么用Vue+Element做個小頁面，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

前言

效果

項目結(jié)構(gòu)

這個的話可以看到分了一些組件嘛。然后總體還是vue+elementui 后面活下來了再用uniapp做移動端嘛。

MarkDown編輯器

這個是咱們比較主要的功能嘛。

也是用了meavon這個開源的Markdown組件嘛。

然后是文章上傳嘛，這里有個彈窗嘛。

代碼如下

<template>
  <div id="main">
    <div>
      <div>
        <input type="text" v-model="form.title" placeholder="請輸入文章標(biāo)題" required>
        <el-button @click="submit" type="primary">發(fā)布文章</el-button>

      </div>

      <mavon-editor
        v-model="form.value"
        ref="md"
        @change="change"
        
      />
    </div>

    <el-dialog
      
      title="文章提交"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">

        <el-form-item label="文章封面URL" >
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>

        <el-form-item label="選擇社區(qū)" prop="community">
          <el-select v-model="ruleForm.community" placeholder="請選擇發(fā)布社區(qū)">
            <el-option label="社區(qū)一" value="A"></el-option>
            <el-option label="社區(qū)二" value="B"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="選擇專欄" prop="community">
          <el-select v-model="ruleForm.column" placeholder="請選擇發(fā)布專欄">
            <el-option label="java" value="java"></el-option>
            <el-option label="python" value="python"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="選擇權(quán)限" prop="level">
          <el-select v-model="ruleForm.level" placeholder="請選擇文章權(quán)限">
            <el-option label="私密" value="0"></el-option>
            <el-option label="公開閱覽" value="1"></el-option>
            <el-option label="公開讀寫權(quán)限" value="2"></el-option>
            <el-option label="完全公開(所有人持有)" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="文章類型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="原創(chuàng)" value="0"></el-radio>
            <el-radio label="轉(zhuǎn)載" value="1"></el-radio>
            <el-radio label="翻譯" value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文章描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>

      <div   slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'     //引入mavon-editor組件
import 'mavon-editor/dist/css/index.css'       //引入組件的樣式
export default {
  // 注冊
  name: "writeblog",
  components: {
    mavonEditor,
  },

  data() {
    return {
      dialogFormVisible: false,
      form: {
        value:'', // 輸入的markdown
        html:'',    // 及時轉(zhuǎn)的html
        ruleForm:this.ruleForm,
        title: '',
      },
      ruleForm: {
        url: '',
        community:"",
        column: '',
        level:'',
        desc: '',
        type:'',
      },

      rules: {
        desc: [
          { required: true, message: '請輸入文章描述', trigger: 'blur' },
          { min: 1, max: 150, message: '長度在 1 到 150 個字符', trigger: 'blur' }
        ],

        community: [
          { required: true, message: '請選擇發(fā)布社區(qū)', trigger: 'blur' },
        ],

        level:[
          { required: true, message: '請選擇文章權(quán)限', trigger: 'blur' },
        ],

        type: [
          { required: true, message: '請選擇文章類型', trigger: 'change' }
        ],

      }
    }
  },

  methods: {
    // 所有操作都會被解析重新渲染
    change(value, render){        //value為編輯器中的實際內(nèi)容，即markdown的內(nèi)容，render為被解析成的html的內(nèi)容
      this.form.html = render;
    },
    // 提交
    submit(){
      //點擊提交后既可以獲取html內(nèi)容，又可以獲得markdown的內(nèi)容，之后存入到服務(wù)端就可以了
      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("標(biāo)題不能為空")
            return
          }
          alert('submit!');
          this.dialogFormVisible = false;
          console.log(this.ruleForm)
        } else {

          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  mounted() {

  }
}
</script>
<style scoped>
#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;

}
</style>

這次的前端代碼其實是完全重構(gòu)，原來上個學(xué)期期末寫的玩意咋說呢，還不如我以前直接用Django做的Dome。做著做著變成了個人博客，然后又重新改回多人社區(qū)，趕鴨子上架連文檔都沒有搞好，所有后面我直接擺爛了，本來寒假要動工的，但是學(xué)習(xí)任務(wù)拉滿，唉。

消息模塊

這個也是一個比較重要的模塊，因為這個消息可以把幾個模塊聯(lián)合起來。

先來說說那個標(biāo)號

是咋來的，這個其實就是elementui里面的這個

然后是咱頁面

后面的幾個其實是類似的

這個你們直接看著寫

消息導(dǎo)航

首先是咱的消息導(dǎo)航代碼

<template>
<div>
  <el-container >
    <el-aside width="200px" >
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>問答消息</template>
          <el-menu-item-group>
            <router-link class="alink" to="/notices/aComment">
              <el-menu-item index="1-1">
                <el-badge :value="5" :max="99" class="item">
                  評論消息
                </el-badge>
              </el-menu-item>
            </router-link>
            <router-link class="alink" to="/notices/thumbNews">
              <el-menu-item index="1-2">
                點贊消息
              </el-menu-item>
            </router-link>
            <router-link to="/notices/replyMessage" class="alink">
              <el-menu-item index="1-3">
                回答消息
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>


        <el-submenu index="2">
          <template slot="title"><i class="el-icon-message"></i>文章消息</template>
          <el-menu-item-group>
            <router-link to="/notices/articleComment" class="alink">
              <el-menu-item index="2-1">
                文章評論
              </el-menu-item>
            </router-link>

            <router-link class="alink" to="/notices/thumbArticles">
              <el-menu-item index="2-2">
                文章點贊
              </el-menu-item>
            </router-link>

            <router-link class="alink" to="/notices/articlePush">
              <el-menu-item index="2-3">
                文章push
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title"><i class="el-icon-message-solid"></i>系統(tǒng)通知</template>
          <el-menu-item-group>
            <router-link class="alink" to="/notices/auditInformation">
              <el-menu-item index="3-1">
                審核消息
              </el-menu-item>
            </router-link>
            <router-link class="alink" to="/notices/activeMessage">
              <el-menu-item index="3-2">
                活動消息
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title"><i class="el-icon-s-custom"></i>好友</template>
          <el-menu-item-group>
            <router-link class="alink" to="/notices/friendVerification">
              <el-menu-item index="4-1">
                好友驗證
              </el-menu-item>
            </router-link>
            <router-link class="alink" to="/notices/friendsMessage">
              <el-menu-item index="4-2">
                好友消息
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title"><i class="el-icon-setting"></i>設(shè)置</template>
          <router-link class="alink" to="/notices/noticesettings">
            <el-menu-item-group>
              <el-menu-item index="5-1">消息設(shè)置</el-menu-item>
            </el-menu-item-group>
          </router-link>
        </el-submenu>

      </el-menu>
    </el-aside>
      <el-container
        style="background-image: url(/static/logo/noticesbg.jpg);
        background-repeat: no-repeat;
        background-size:100% 100%;
        "
      >
        <el-main>
          <div >
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
  </el-container>
</div>
</template>

<script>
export default {
  name: "notices",
  data() {

    return {

    }
  },
}
</script>

<style scoped>
.el-header {
  background-color: #e5efe2;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.router-link-active {
  text-decoration: none;
}

.alink{

  text-decoration: none;
}
</style>

內(nèi)容代碼（消息）

<template>
<div >
  <br>
  <div class="head" >
    <el-button  type="primary" plain>清空所有</el-button>
  </div>
  <br>
  <div  class="main">
    <el-card shadow="hover" v-for="(message,index) in Messages" :key="index">

      <div >
        <div  >
        <img
          
          src="/static/temporary/headpic.jpg"
          class="image"
        >
        </div>
        <div >
          <p class="message">{{message.from}} 評論了你 &nbsp;&nbsp;<i class="el-icon-info"></i></p>
          <p 
          >
            {{message.info}}</p>
          <p class="message">
            來自問答：{{message.quiz}}

          </p>
        </div>

        <div >
          <p>
            <el-button  icon="el-icon-delete" ></el-button>
          </p>
          <p>
            {{message.data}}
          </p>
        </div>

      </div>
    <br>
    </el-card>
  </div>
  <br>
  <div class="footer" >
    <div class="block" >
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</div>

</template>

<script>
export default {
  name: "aComment",
  data(){
    return{
      total: 999,
      Messages:[
        {"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},

      ]
    }
  },
}
</script>

<style scoped>
.message{
  width: 20em;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>

設(shè)置模塊

這個不一樣的是咱的設(shè)置模塊

<template>
<div >
  <el-card shadow="hover">
    <div >
      <p>
          問答評論消息提醒
      </p>
    </div>
      <div >
        <p>
          <el-switch
            v-model="askcommentvalue"
            active-text="開啟"
          >
          </el-switch>
        </p>
      </div>
  </el-card>

  <el-card shadow="hover">
    <div >
      <p>
        問答回答消息提醒
      </p>
    </div>
    <div >
      <p>
        <el-switch
          v-model="askanswervalue"
          active-text="開啟"
        >
        </el-switch>
      </p>
    </div>
  </el-card>


  <el-card shadow="hover">
    <div >
      <p>
        文章評論消息提醒
      </p>
    </div>
    <div >
      <p>
        <el-switch
          v-model="articlecomment"
          active-text="開啟"
        >
        </el-switch>
      </p>
    </div>
  </el-card>

  <el-card shadow="hover">
    <div >
      <p>
        文章點贊消息提醒
      </p>
    </div>
    <div >
      <p>
        <el-switch
          v-model="articlethumb"
          active-text="開啟"
        >
        </el-switch>
      </p>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
  name: "noticesettings",
  data() {
    return {
      askcommentvalue: true,
      askanswervalue: true,
      articlecomment: true,
      articlethumb: true,

    }
  },
}
</script>
<style scoped>
</style>

以上是“怎么用Vue+Element做個小頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！