写在前面

作为一个后端程序员，很多时候我们也想自己搞一个炫酷的前端页面出来。

无奈专精后端的我们已经精疲力尽了，但是作为一个程序员。怎能没有一颗全栈的心呢！

目前前端比较流行的框架Vue.js，在这基础上有一批成熟的后台系统开源项目。

1、element （截止发稿前 start 51.8k）
官网：http://element.eleme.io
地址：https://github.com/PanJiaChen/vue-element-admin
2、Vue Admin
官网：https://admin.vuebulma.com
地址：https://github.com/taylorchen709/vue-admin
3、iview-admin（截止发稿前 start 14.4k）
https://github.com/iview/iview-admin
4、d2-admin（截止发稿前 start 8.4k） √
https://github.com/d2-projects/d2-admin

主角：D2-Admin

动手做起来
https://d2.pub/zh/doc/d2-admin/learn/start.html

环境准备:

安装nodejs
# 检查是否安装成功
node -v
npm -v
# cnpm方式
npm install -g cnpm --registry=https://registry.npm.taobao.org

克隆简化版代码：

git clone [email protected]:d2-projects/d2-admin-start-kit.git

跳转到对应目录，安装依赖

cnpm install

开发调试

npm run dev

参考开发手册上手

步骤1：#新建页面
src/views 目录是页面存放目录，在此目录下新建目录，例如 page-demo：
然后在文件夹内新建 index.vue 文件
在这里插入图片描述
index.vue 内容：

<template>
  <d2-container>
    <template slot="header">header</template>
    Hello LiugeData！
    <template slot="footer">footer</template>
  </d2-container>
</template>

步骤2：# 设置路由
src/router/routes.js 是路由配置文件：
在这里插入图片描述

 {
        path: '/page-demo',
        name: 'page-demo',
        component: _import('page-demo'),
        meta: {
          auth: true,
          title: '我的第一个页面'
        }
 }

步骤3：# # 设置菜单
src/menu 目录是菜单存放目录，
顶栏
在这里插入图片描述
侧边栏