准备知识

组件

组件基础

局部注册

font-awesome

为了使用一些常用图标，本项目选择使用 font-awesome

  • 安装
$ npm install font-awesome --save-dev

在 main.js 里添加

import 'font-awesome/css/font-awesome.css'

Category (分类菜单组件)

Category.vue

<template>
  <div class="list-todos">  <!--菜单容器-->
    <a class="list-todo activeListClass list" > <!--单个菜单容器-->
      <span class="fa fa-fw fa-lock" ></span>  <!--锁的图标-->
      <span class="count-list">1</span><!--数字-->
      星期一 <!--菜单内容-->
    </a>
    <a class="link-list-new" > <!--新增菜单-->
      <span class="fa fa-fw fa-plus">
      </span>
      新增
    </a>
  </div>
</template>
<script>
</script>

<style lang="less" scoped>
  @import '../style/category.less';
</style>

访问

直接访问 http://localhost:8080/#/ 即可查看效果。