Vue博客（2年前）

总述： 模块：笔记（文章）、案例、工具分享。 功能：笔记阅读、评论、分享、搜索、案例展示、工具分享。

1、项目用vue-cli搭建的，官网上有详解，这里不赘述 项目结构：

2、组件： 页面（4）： 首页、文章列表、文章阅读、案例展示、工具分享

3、操作流程：

• 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…