Vue博客（2年前）

總述： 模塊：筆記（文章）、案例、工具分享。 功能：筆記閱讀、評論、分享、搜索、案例展現、工具分享。

一、項目用vue-cli搭建的，官網上有詳解，這裏不贅述 項目結構：

二、組件： 頁面（4）： 首頁、文章列表、文章閱讀、案例展現、工具分享

三、操做流程：

• 1）首頁（包含導航、輪播、技能水平、最新文章、案例、我的愛好）。 更多文章Btn=>文章列表，文章閱讀詳細=>文章閱讀頁。 更多案例Btn=>案例展現列表頁，相關案例展現=>案例展現頁（子站 未寫），相關文章解析=>對應解析文章閱讀頁
• 2）筆記（文章分類）=>文章列表頁=>文章閱讀頁
• 3）案例（案例展現頁），相關案例展現=>案例展現頁（子站 未寫），相關文章解析=>對應解析文章閱讀頁
  效果： 首頁

文章列表

案例

工具

閱讀頁

技術解析： app.vue javascript 代碼

<template>
  <div id="app">
    <v-header></v-header>
    <transition name="fade" mode="out-in">
       <router-view></router-view>
    </transition>
    <v-footer></v-footer>
  </div>
</template>

<script>
import header from '@/components/header'
import footer from '@/components/footer'
import share from '@/components/share'

export default {
  name: 'app',
  components:{
    "v-header":header,
    "v-footer":footer
  },
  computed:{
  },
  methods:{
  }
}
</script>
複製代碼

包含頭部和尾部以及router-view。

header.vue html 代碼

<template>
  <div class="main_nav">
      <div class="content clearfix">
        <div class="logo l"><router-link to="/"><img src="../assets/images/logo.png"/></router-link></div>
        <div class="menu l" id="menu">
          <ul class="clearfix menuul">
            <li v-for="(item,index) in menu" :class="{active:index==activeMenu}" @click="activeMenu=index" @mouseover="onMenu(index)" @mouseout="offMenu(index)">
            <span><router-link :to="{'name':item.component}">{{item.name}}</router-link></span>
            <ul v-if="item.component=='article'" class="list">
              <li v-for="(item_l,index) in article_kind" :class="{bornone:index==article_kind-1}">{{item_l}}</li>
            </ul>
            </li>
          </ul>
        </div>
        <div class="login_con l">
          <div id="login_before" class="l clearfix">
             <div class="btn login_con_item"><a href="">登陸</a></div>
             <div class="btn login_con_item"><a href="" class="register">註冊</a></div>
           </div>
            <div id="login_after" class="l clearfix">
              <div class="name l">lory 糖糖</div>
              <a href="" class="loginOut" id="loginOut">退出</a>
            </div>
        </div>
        <div class="search r">
          <div class="search_icon" @click="searchT"></div>
          <div class="search_input">
            <input type="" name="" placeholder="搜索你想要的..." v-model="searchwhat" @keyup.13="search_handle" />
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import $ from 'jquery'
import {mapState ,mapMutations ,mapActions} from 'vuex'
export default {
  data(){
    return{
       activeMenu:0,
       search:false,
       searchwhat:"",
       menu:[
        {name: "主頁",component:"index"},
        {name: "筆記",component:"article"},
        {name: "案例展現",component:"case"},
        {name: "工具分享",component:"tool"},
        {name: "關於我",component:"index"}
       ]
    }

  },
  computed:{
    ...mapState(["article_kind"])
  },
  methods:{
    searchT:function(){
     if(this.search){
      $(".search_input").animate({width:0});
     }
     else{
      $(".search_input").animate({width:1000});
     }
     this.search=!this.search;
    },
    onMenu:function(index){
      $(".menuul>li").eq(index).find(".list").stop().slideDown();
    },
    offMenu:function(index){
       $(".menuul>li").eq(index).find(".list").stop().slideUp();
    },
    search_handle:function(){
      this.$router.push({ name: 'article' })
      console.log(this.searchwhat);
    }
  }
}
</script>
複製代碼

代碼自取，以爲能夠就star，以爲不能夠能夠直接指出
GitHub地址：github.com/lilicoder/m…