VMC

Mobile components for [email protected]+.

View Demos

特性介绍

VMC是一套针对移动端开发的组件库，适用于[email protected]+。

• 将使用频度高的组件全局化，直接注册到Vue实例化对象上；
• 全部样式基于LESS，并允许通过覆盖LESS变量的方式快速初始化组件样式；
• 同时，你也可以选择使用SASS，我们同样提供了基于SCSS的样式表；
• 可以通过属性来单独定义每个组件的样式(写到style上，这样便能覆盖在LESS中定义的全局样式)；
• 自定义的Child元素，可以实现按需插入元素，同时给予预定义样式；
• 自定义的SlotItem元素，可以方便地自定义循环型组件（如轮播图）中显示的内容。

如何引用

基于webpack的SPA模式

安装与引用

$ npm install vmc --save

注册全局组件

在入口文件中添加以下内容：

import VMC from 'vmc/install';

Vue.use(VMC);

引入组件样式

通过LESS变量覆盖，可以自定义组件的一些初始样式，因此，需要手动引入LESS文件。

@import "vmc/src/styles/vmc.less";
@import "assets/less/vmc.custom.less";      // 自定义变量覆盖，参考styles/base/variable.less

或者使用SASS变量覆盖，来自定义组件的一些初始样式，同样需要手动引入SCSS文件。

@import "assets/scss/vmc.custom.scss";      // 自定义变量覆盖，参考scss/base/variable.scss
@import "vmc/src/scss/vmc.scss";

引用组件

import { Navbar } from 'vmc';

普通标签方式引用

安装与引用

直接下载dist目录下的vmc.css和vmc.js两个文件。

<link rel="stylesheet" href="vmc.css">

<div id="app">
    <v-button type="success" @click="$Alert('Hello world!')">按钮</v-button>
</div>

<script src="vue.js"></script>
<script src="vmc.js"></script>

<script>
    new Vue({
        el: '#app'
    });
</script>

注册全局组件

这种方式会自动注册全局组件，同时自动注册所有组件，无需额外操作。

组件列表

CSS组件

• icono图标 (ICON)

• 1px边框 (1px border)

• 徽标 (Badge)

• 两端对齐 (Justify)

• 文本省略 (NoWrap)

• 小红点 (Red dot)

JS组件

• 操作按钮列表 (ActionSheet)

• 警告框 (Alert)

• 占位盒 (Box)

• 按钮 (Button)

• 卡片 (Card)

• 单栏 (Cell)

• 复选框 (CheckBox)

• 确认框 (Confirm)

• 对话框 (Dialog)

• 分页刷新 (DropLoad)

• 网格 (Grid)

• 强制型输入框 (mInput)

• 提示型输入框 (vInput)

• 两端对齐 (Justify)

• 滚动公告 (Marquee)

• 遮罩层 (Mask)

• 导航栏 (Navbar)

• 数字输入 (Number)

• 选择器 (Picker)

• 弹出层 (Popup)

• 弹出式选择器 (Popup Picker)

• 弹出式日期选择器 (Popup Date Picker)

• 进度条 (Progressbar)

• 提示输入框 (Prompt)

• 单选框 (Radio)

• 评分 (Rater)

• 标题行 (Row)

• 轮播图 (Slider)

• 动态指示器 (Spinner)

• 提交按钮 (Submit)

• 开关 (Switch)

• 导航栏 (Tabbar)

• 选项卡 (TabControl)

• 文本框 (TextArea)

• 加载提示 (Loading)

• 成功提示 (Success)

• 错误提示 (Error)

• 信息提示 (Info)

• 文字提示 (Toast)

• 上传组件 (Upload)

开发与编译

开发

$ npm run dev

命令执行之后会自动跑examples目录下的文件，用于开发调试。

发布

$ npm run release

命令执行之后会将vmc发布到dist目录下。

编译

$ npm run build

命令执行之后会自动将examples目录下的文件打包到docs目录下。

预览

$ npm run docs

命令执行之后会将docs目录作为一个静态的文档服务器资源，可以从浏览器直接访问。

License

MIT