npm 包 bmfe-cms-template 使用教程

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


猜你喜欢

  • npm包loopback-es6-sdk 使用教程

    介绍 LoopBack是由StrongLoop开发的一种Node.js框架。它可以快速地构建API,提供了数据库连接,身份验证及授权等功能。loopback-es6-sdk是一个npm包,其针对Loo...

    2 年前
  • npm 包 npms-client-service 使用教程

    介绍 npms-client-service 是一个使用 Node.js 编写的 npm 包,它是 NPMS 的客户端服务包装器,提供了一系列查询和过滤 npm 包的能力。

    2 年前
  • npm 包 simple-providers 使用教程

    简介 simple-providers 是一个轻量级的 npm 包,它提供了一些简单易用的数据提供者函数,适用于 Web 前端开发。通过使用 simple-providers,开发者可以快速在前端页面...

    2 年前
  • npm 包 debugged 使用教程

    在前端开发中,经常需要调试代码,查看某些变量或函数的值。npm 包 debugged 是一个帮助开发者在控制台输出调试信息的工具,功能强大,使用方便,本篇文章将详细介绍 debugged 的使用方法以...

    2 年前
  • npm 包 mofron-comp-feature 使用教程

    介绍 mofron-comp-feature 是一个基于 Mofron 框架的前端组件,用于为网站或应用程序添加各种特性和功能,如通知条、滚动条、弹窗等。该组件提供了多种配置选项,可以根据需要灵活定制...

    2 年前
  • npm 包 reactive-i18n 使用教程

    在前端开发中,多语言支持是一个非常重要的功能。而 reactive-i18n 就是一款方便快捷的开源 npm 包,可以帮助我们实现多语言支持。 1. 安装 在命令行中使用以下命令进行安装: --- -...

    2 年前
  • NPM 包 bcoin-zmq 使用教程

    在前端开发过程中,我们常常需要使用一些第三方库来实现功能。在这些第三方库中,NPM 包是广泛应用的一种。在本文中,我们将详细介绍一个名为 bcoin-zmq 的 NPM 包,包括其使用方法,应用场景和...

    2 年前
  • npm 包openshift-uptimer使用教程

    本文主要介绍 npm 包 openshift-uptimer 的使用教程,帮助前端开发者更好地实现对应用程序的可靠性保证。本文将从以下几个方面进行介绍: 简介及下载安装 使用指南 示例代码与运行结果...

    2 年前
  • npm 包 uws-components 使用教程

    前言 在前端开发中,我们经常需要使用一些 UI 组件来搭建页面。而使用已有的组件库可以大大提高开发效率和产品质量。npm 是最大的 JavaScript 包管理器,可以帮助我们轻松地获取和管理 Jav...

    2 年前
  • npm 包 three-onevent 使用教程

    前言 three-onevent 是一个用于 Three.js 的 npm 包,它提供了一种基于事件的 Three.js 场景管理机制。借助 three-onevent,我们可以更方便地处理 Thre...

    2 年前
  • npm 包 generator-powdered-toast 使用教程

    什么是 generator-powdered-toast generator-powdered-toast 是一个基于 Yeoman 的 npm 包,用于快速生成基础的前端项目结构。

    2 年前
  • npm 包 webpack-pkg-plugin 使用教程

    前言 在前端开发过程中,我们常常需要将各个模块打包成可部署的包。而 webpack-pkg-plugin 就是一个可以帮助我们将 webpack 打包的文件打包成可部署的包的 npm 包。

    2 年前
  • npm 包 xhr2-with-formdata 使用教程

    简介 在前端开发中,我们经常会需要通过 Ajax 技术与后端服务器进行通信。而在上传文件等高级操作时,我们则需要使用 FormData 这一 API。但是,对于一些老旧的浏览器,它们并不支持 Form...

    2 年前
  • npm 包 angular-weather-widget 使用教程

    什么是 angular-weather-widget angular-weather-widget 是一个基于 Angular 框架开发的简单天气小部件,通过调用第三方天气 API 获取实时天气信息,...

    2 年前
  • npm 包 dog-ceo 使用教程

    简介 dog-ceo 是一个 npm 包,提供了一组 API 来获取随机狗狗图片的 URL,支持不同的狗狗品种以及随机颜色。 安装 你可以通过 npm 来安装 dog-ceo,使用以下命令: --- ...

    2 年前
  • npm 包 dot-proxy 使用教程

    简介 dot-proxy 是一个基于 Node.js 的代理工具,可以在开发过程中拦截网络请求并修改响应内容,同时也支持本地构建和代理远程接口。它可以用于开发和测试环境中,对于前端开发而言是一个非常方...

    2 年前
  • npm 包 sealed 使用教程

    在前端开发中,我们经常会使用第三方的库来帮助我们快速地开发出高质量的网页或应用程序。而 npm 包 sealed 就是其中一款十分实用的工具。本篇文章将详细介绍 sealed 库的使用方法和示例代码,...

    2 年前
  • npm 包 fullcalendar-ag4 使用教程

    介绍 fullcalendar-ag4 是一个基于 jQuery 和 Moment.js 的开源日历插件。它允许你创建可定制的、交互式的日历视图,包括月、周、日和日程视图。

    2 年前
  • npm包m-jsutils使用教程

    m-jsutils是一个开源的npm包,提供了一些实用的JavaScript工具函数,方便开发者在编写前端代码的过程中使用。本篇文章将介绍如何使用m-jsutils及其各种函数的用法、示例代码以及注意...

    2 年前
  • npm 包 neutrino-preset-component 使用教程

    前言 前端开发一个重要的工作就是构建自己的项目。在项目开发过程中,我们需要处理很多的事情,包括但不限于项目结构、编译工具、编译器等等,这一切的一切都是为了提升我们的开发体验和代码质量。

    2 年前

相关推荐

    暂无文章