Mag design in MIP

本项目是 Mag Design 设计规范的组件库，本文档主要介绍组件的使用方法和组件的开发指南。

依赖与安装

确保安装了Node.js(版本>=4)。

使用方式

使用 CDN

npm 安装

npm install mip-mag-design --save

并在代码中使用合适的方式引用：

webpack

require('mip-mag-design');

html

<link rel="stylesheet" type="text/css" src="/node_modules/mip-mag-design/dist/mag-design.min.css">

css

@import "/node_modules/mip-mag-design/dist/mag-design.min.css"

stylus

@require "/node_modules/mip-mag-design/src/base/main"

从源码编译

# 克隆仓库
git clone https://github.com/mipengine/mip-mag-design.git
# 进入仓库目录
cd mag-design/
# 安装依赖
npm i
# 构建
npm run build

获取 dist/mag-design.min.css 包进行部署。

组件使用

参考 example/index.html

开发指南

环境准备

确保安装了Node.js(>=4)，然后克隆仓库并安装依赖。

# 克隆仓库
git clone https://github.com/mipengine/mip-mag-design.git
# 进入仓库目录
cd mag-design/
# 安装依赖
npm i

创建组件

工具自动生成styl、index.html、READEME.md文件

npm run creat xxx

样式开发

• 样式开发遵从stylus语法，语法学习请移步：stylus语法
• 组件样式须在src/base/main.styl中引入：

@require 'reset'
@require '../button/button'
@require '../link/link'

demo开发

书写html即可，引入mag-design.min.css路径为：

• 组件demo引入方式：

<link rel="stylesheet" type="text/css" href="../mag-design.min.css">

• example下demo引入方式：

<link rel="stylesheet" type="text/css" href="../dist/mag-design.min.css">

编译打包

对src下的所有styl文件编译、压缩、打包到dist目录；将src和example下的html文件拷贝到dist下。

npm run build

预览

使用本地server预览组件。 首先需要在对应组件下编写demo文件index.html。

• 组件的demo路径：src/xxx/index.html
• 页面级别(所有组件)的demo路径：src/example/index.html

# 预览单个组件demo
npm run preview button

# 预览页面级别(所有组件)demo
npm run preview

提交

# add需要提交的文件
git add xxx

# 提交一个commit
git commit -m 'xxxx'

# 打包一个版本,通常打包小版本patch
npm version [patch | minor | major]

# 提交源代码到仓库
git push

# 发布npm包
npm publish

提交信息规范

git commit 信息和 pull request 标题必须遵循 MIP 项目的 提交信息规范 ，否则不予合入。

License

Copyright (c) 2017-present, Baidu Inc.