npm 包 bmfe-cms-template 使用教程

阅读时长 5 分钟读完

1. 什么是 bmfe-cms-template?

bmfe-cms-template 是一个基于 vue 的后台管理系统模板,使用了 element-ui,丰富的组件以及良好的代码构造方式使得它在开发中具有很大的优势。

2. 如何使用 bmfe-cms-template?

2.1 安装

可以使用 npm 进行安装,运行以下命令:

2.2 引入

在 main.js 中进行引入

-- -------------------- ---- -------
------ --- ---- -----
------ --- ---- -----------
------ --------------- ---- -------------------

------------------------

--- -----
  --- -------
  ------- - -- ------
--

2.3 使用

在组件中使用 bmfe-cms-template

-- -------------------- ---- -------
----------
  -----
    ----------- ----------------- ----------------------- --
  ------
-----------

--------
------ ------- -
  ---- -- -
    ------ -
      ---------- -
        -
          --- --
          ----- -----
          ---- ---
          -------- --------
        --
        -
          --- --
          ----- -----
          ---- ---
          -------- ---------
        --
        -
          --- --
          ----- -----
          ---- ---
          -------- --------
        -
      --
      ------------- -
        -
          ----- -----
          ------ -----
          ------ -----
        --
        -
          ----- -------
          ------ ----
        --
        -
          ----- ------
          ------ ----
        --
        -
          ----- ----------
          ------ ----
        -
      -
    -
  -
-
---------

3. bmfe-cms-template 的详细说明

bmfe-cms-template 中提供了一些常用组件,用以快速搭建后台管理系统。以下是常用的组件列表。

3.1 常用组件

bmfe-table

table 组件

props:

属性 类型 默认值 是否必填 说明
data Array [] table 数据源
columns Array [] 表格列的配置描述,类型是一个数组,数组中每一项都是一个对象,对象可以包含 label、prop、width、fixed、align、type 等属性

例子

bmfe-dialog

dialog 组件

props:

属性 类型 默认值 是否必填 说明
title String - dialog 标题
show Bool false 是否展示
width Number 800 dialog 宽度
noClose Bool false 是否显示右上角关闭按钮
maskClose Bool true 点击遮罩是否可以关闭

例子

3.2 bmfe-cms-template 的目录结构

  • assets
    • img // 图片等资源
    • style // 样式文件
  • components // 组件文件
  • router // vue-router 路由文件
  • views // 页面文件
  • App.vue // 唯一页面容器,存放路由渲

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055db881e8991b448db752

纠错
反馈