Skip to content

mag design 落地在 MIP 页的 UI 库,为 MIP 页面提供基础设计样式和 UI 组件。

License

Notifications You must be signed in to change notification settings

mipengine/mip-mag-design

Repository files navigation

Mag design in MIP

Build Status npm

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

依赖与安装

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

使用方式

使用 CDN

说明 链接 备注
大版本号 https://c.mipcdn.com/static/mag-design/v大版本号/mag-design.min.css ,如:
https://c.mipcdn.com/static/mag-design/v2/mag-design.min.css
浏览器过期时间为10分钟
小版本号 https://c.mipcdn.com/static/mag-design/小版本号/mag-design.min.css ,如:
https://c.mipcdn.com/static/mag-design/2.0.0/mag-design.min.css
浏览器过期时间为10年

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

创建组件

工具自动生成stylindex.htmlREADEME.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目录;将srcexample下的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

license

Copyright (c) 2017-present, Baidu Inc.

About

mag design 落地在 MIP 页的 UI 库,为 MIP 页面提供基础设计样式和 UI 组件。

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published