meiko v1.5.3

Meiko

前端通用组件与工具库，该框架基于iView、Vue、TypeScript、Less等。致力于更轻松的构建前端项目。

Demo 示例

克隆 Meiko 源代码，切换到example分支，并执行以下命令：

npm install # 安装依赖
npm run serve

在浏览器中输入http://127.0.0.1:1841即可，在此页面可预览整体示例以及组件示例。

框架安装

使用vue脚手架构建项目，激活如下选项：

• TypeScript
• Class-style Component
• Less
• TSLint

安装 Meiko 框架：

cd your-project
npm i meiko
npm i iview

编辑main.ts，引入框架：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 导入 Meiko
import 'meiko';
import 'meiko/src/styles/index.less';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

根目录添加vue.config.js，并编辑：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
};

组件使用说明

meiko框架基于iView，具体组件使用说明请参考官方网站，以下是meiko自集成组件。

MViewport

该组件为基础视图组件，为前端项目的基础组件。可参考示例代码中的App.vue。

props:

slots:

events:

MIconButton

该组件为图标按钮组件，只能应用于MViewport的顶栏中，用于实现功能性按钮，其中icon属性请参考iView说明手册。

props:

events:

MIcon

该组件为图标按钮组件，用于实现功能性按钮，其中icon属性请参考iView说明手册。

props:

events:

MForm

该组件为表单组件，便于更简单的编写与布局多输入项的页面。

props:

events:

MTable

该组件为表格组件，包含表格以及分页功能。可参考示例代码中的Table.vue

props:

slots:

events:

权限设计

页面的权限设计涵盖两个方面，基础视图MViewport以及路由页面中的组件，下面详细说明权限控制层面上的约定。

基础视图

基础视图MViewport可进行权限控制的组件有：