快速上手

本文将会带领您从 0 开始使用 D2Admin 创建下面的页面:

TIP

本示例中的代码和截图可能和您现在手中的版本不同,但操作思路一样。

安装环境

TIP

如果您以前运行过 webpack 项目,并且本机 node 版本为 8,可以忽略这一步。

node

node.js 官网 下载合适您系统的 node.js。

安装完毕后检查版本(最好使用 node 8 版本)。

node -v
v8.11.1
npm -v
5.6.0

nrm or cnpm

由于网络原因,npm 在国内使用比较慢,建议切换 npm 源到国内镜像。

有两种比较方便的方式切换您的 npm 源:

  1. nrm [ 建议 ]

安装:

npm install -g nrm

查看所有可用源:

nrm ls
* npm -----  https://registry.npmjs.org/
  cnpm ----  http://r.cnpmjs.org/
  taobao --  https://registry.npm.taobao.org/
  nj ------  https://registry.nodejitsu.com/
  rednpm -- http://registry.mirror.cqupt.edu.cn
  skimdb -- https://skimdb.npmjs.com/registry

切换源:

nrm use taobao
  1. cnpm

安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org

下载项目

手动下载

前往仓库下载源码:

挑选一个您喜欢的网站 Fork 代码到您的仓库,然后下载或克隆。

TIP

如果使用 Github 下载过慢,请参考 常见问题

我的建议是使用 简化版起始模板 因为在完整版的基础上做减法,要比在简化版基础上做加法复杂。

下面的步骤都以简化版起始模板为基础演示如何使用。

下载完成后您会得到这些资源(以 1.1.5 版本为例):

d2-admin-cli

D2 Admin CLI 是一个基于 D2 Admin 的脚手架系统,可以快速生成 D2 Admin 项目。

安装 cli

使用 npm

npm install -g @d2-admin/d2-admin-cli

使用 yarn

yarn global add @d2-admin/d2-admin-cli

创建项目

进入想要创建项目的文件夹,运行以下命令来创建一个新项目:

d2 create
# 或者
d2 c
项目名称

项目名称即所要创建项目的文件夹名称,默认为 d2-admin-demo

项目模板
  • 完整版:包含所有插件和示例代码
  • 简化版:不包含非必须插件和组件,保留所有系统功能

查看 D2 Admin 文档

运行以下命令:

d2 doc
# 或者
d2 d

安装依赖

将终端切换到项目目录之后安装依赖:

npm i

如果遇到问题比如 node-sass 安装不上,请参考 常见问题

开发调试

在项目目录内启动项目:

npm run dev

或者使用:

npm start

也可以使用 cli3 新推荐的命令:

npm run serve

以上每种方式效果都是一样的,只是为了照顾不同人的习惯起了三个名字,实质上都是运行了 vue-cli-service serve --open

成功运行后会显示登录界面:

新建页面

src/pages 目录是页面存放目录,在此目录下新建目录,例如 page-demo

然后在文件夹内新建 index.vue 文件:

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

上面的代码生成了一个带有 header 和 footer 的页面,页面内容只有一句话,如果您好奇为什么这么写,可以参考 页面容器

设置路由

src/router/routes.js 是路由配置文件。

frameIn 变量最后添加:

{
  path: '/page-demo',
  name: 'page-demo',
  component: () => import('@/pages/page-demo'),
  meta: {
    auth: true,
    title: '新建示例'
  }
}

最后 frameIn 变量应该是这样:























 
 
 
 
 
 
 
 
 




const frameIn = [
  {
    path: '/',
    redirect: { name: 'index' },
    component: layoutHeaderAside,
    children: [
      {
        path: 'index',
        name: 'index',
        meta,
        component: () => import('@/pages/index')
      },
      // ...
      {
        path: '/page3',
        name: 'page3',
        component: () => import('@/pages/page3'),
        meta: {
          auth: true, 
          title: '页面 3'
        }
      },
      {
        path: '/page-demo',
        name: 'page-demo',
        component: () => import('@/pages/page-demo'),
        meta: {
          auth: true, 
          title: '新建示例'
        }
      }
    ]
  }
]

设置菜单

src/menu 目录是菜单存放目录,里面的两个文件分别存放顶栏和侧边栏的菜单。

TIP

D2Admin 现在将顶栏和侧边栏菜单分别存放然后赋值的逻辑只是一个最简单的演示,请根据您的需要自己修改菜变化逻辑,您可以只用一行代码就可以动态更新菜单,方法见 vuex menu 模块

打开 src/menu/header.js 添加新的菜单(高亮行):










 




export default [
  { path: '/index', title: '首页', icon: 'home' },
  {
    title: '页面',
    icon: 'folder-o',
    children: [
      { path: '/page1', title: '页面 1' },
      { path: '/page2', title: '页面 2' },
      { path: '/page3', title: '页面 3' },
      { path: '/page-demo', title: '新建示例' }
    ]
  }
]

打开 src/menu/aside.js 添加新的菜单(高亮行):










 




export default [
  { path: '/index', title: '首页', icon: 'home' },
  {
    title: '页面',
    icon: 'folder-o',
    children: [
      { path: '/page1', title: '页面 1' },
      { path: '/page2', title: '页面 2' },
      { path: '/page3', title: '页面 3' },
      { path: '/page-demo', title: '新建示例' }
    ]
  }
]

效果

经过上述步骤您得到了一个具有顶栏和底栏的页面,这个页面的入口在顶栏菜单和侧边栏菜单都会显示,并且打开此页面时浏览器 title 也会做出相应更新。

上述教程只是介绍了 D2Admin 的冰山一角,更多的配置项和组件文档请查阅本文档其它板块。

最后更新: 1/19/2019, 4:50:42 AM