准备知识

组件

组件基础

局部注册

font-awesome

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

  • 安装
  [sh]
1
$ npm install font-awesome --save-dev

在 main.js 里添加

  [js]
1
import 'font-awesome/css/font-awesome.css'

Category (分类菜单组件)

Category.vue

  [html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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/#/ 即可查看效果。