1. 什么是 bmfe-cms-template?
bmfe-cms-template 是一个基于 vue 的后台管理系统模板,使用了 element-ui,丰富的组件以及良好的代码构造方式使得它在开发中具有很大的优势。
2. 如何使用 bmfe-cms-template?
2.1 安装
可以使用 npm 进行安装,运行以下命令:
npm i bmfe-cms-template --save
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-table :data="tableData" :columns="tableColumns" />
bmfe-dialog
dialog 组件
props:
属性 | 类型 | 默认值 | 是否必填 | 说明 |
---|---|---|---|---|
title | String | - | 是 | dialog 标题 |
show | Bool | false | 是 | 是否展示 |
width | Number | 800 | 否 | dialog 宽度 |
noClose | Bool | false | 否 | 是否显示右上角关闭按钮 |
maskClose | Bool | true | 否 | 点击遮罩是否可以关闭 |
例子
<bmfe-dialog title="dialog的标题" :show.sync="show"> <p>这是展示的内容</p> </bmfe-dialog>
3.2 bmfe-cms-template 的目录结构
- assets
- img // 图片等资源
- style // 样式文件
- components // 组件文件
- router // vue-router 路由文件
- views // 页面文件
- App.vue // 唯一页面容器,存放路由渲
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055db881e8991b448db752