{"id":19751130,"url":"https://github.com/mipengine/mip-mag-design","last_synced_at":"2026-03-03T08:06:56.294Z","repository":{"id":57298189,"uuid":"109341116","full_name":"mipengine/mip-mag-design","owner":"mipengine","description":"mag design 落地在 MIP 页的 UI 库，为 MIP 页面提供基础设计样式和 UI 组件。","archived":false,"fork":false,"pushed_at":"2018-04-25T06:50:47.000Z","size":294,"stargazers_count":5,"open_issues_count":1,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-01-10T21:32:42.714Z","etag":null,"topics":["mag-design","mip","mip-mag-design"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mipengine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-03T02:13:32.000Z","updated_at":"2020-04-03T13:55:16.000Z","dependencies_parsed_at":"2022-09-06T04:20:23.958Z","dependency_job_id":null,"html_url":"https://github.com/mipengine/mip-mag-design","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-mag-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-mag-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-mag-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-mag-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mipengine","download_url":"https://codeload.github.com/mipengine/mip-mag-design/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241080815,"owners_count":19906352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mag-design","mip","mip-mag-design"],"created_at":"2024-11-12T02:42:34.650Z","updated_at":"2026-03-03T08:06:51.273Z","avatar_url":"https://github.com/mipengine.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mag design in MIP\n\n[![Build Status](https://travis-ci.org/mipengine/mip-mag-design.svg?branch=master)](https://travis-ci.org/mipengine/mag-design) [![npm](https://img.shields.io/npm/v/mip-mag-design.svg)](https://www.npmjs.com/package/mip-mag-design)\n\n本项目是 Mag Design 设计规范的组件库，本文档主要介绍组件的使用方法和组件的开发指南。\n\n## 依赖与安装\n\n确保安装了Node.js(版本\u003e=4)。\n\n## 使用方式\n\n### 使用 CDN\n\n说明 | 链接 | 备注\n--- | --- | ---\n大版本号 | `https://c.mipcdn.com/static/mag-design/v大版本号/mag-design.min.css` ，如：\u003cbr\u003e\u003chttps://c.mipcdn.com/static/mag-design/v2/mag-design.min.css\u003e | 浏览器过期时间为10分钟\n小版本号 | `https://c.mipcdn.com/static/mag-design/小版本号/mag-design.min.css` ，如：\u003cbr\u003e\u003chttps://c.mipcdn.com/static/mag-design/2.0.0/mag-design.min.css\u003e | 浏览器过期时间为10年\n\n### npm 安装\n\n```bash\nnpm install mip-mag-design --save\n```\n\n并在代码中使用合适的方式引用：\n\n#### webpack\n\n```javascript\nrequire('mip-mag-design');\n```\n\n#### html\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" src=\"/node_modules/mip-mag-design/dist/mag-design.min.css\"\u003e\n```\n\n#### css\n\n```css\n@import \"/node_modules/mip-mag-design/dist/mag-design.min.css\"\n```\n\n#### stylus\n\n```stylus\n@require \"/node_modules/mip-mag-design/src/base/main\"\n```\n\n### 从源码编译\n\n```bash\n# 克隆仓库\ngit clone https://github.com/mipengine/mip-mag-design.git\n# 进入仓库目录\ncd mag-design/\n# 安装依赖\nnpm i\n# 构建\nnpm run build\n```\n\n获取 `dist/mag-design.min.css` 包进行部署。\n\n### 组件使用\n\n参考 [example/index.html](example/index.html)\n\n## 开发指南\n\n### 环境准备\n\n确保安装了Node.js(\u003e=4)，然后克隆仓库并安装依赖。\n\n```bash\n# 克隆仓库\ngit clone https://github.com/mipengine/mip-mag-design.git\n# 进入仓库目录\ncd mag-design/\n# 安装依赖\nnpm i\n```\n\n### 创建组件\n工具自动生成`styl`、`index.html`、`READEME.md`文件\n```bash\nnpm run creat xxx\n```\n\n### 样式开发\n\n- 样式开发遵从`stylus`语法，语法学习请移步：[stylus语法](http://stylus-lang.com/)\n- 组件样式须在`src/base/main.styl`中引入：\n\n```\n@require 'reset'\n@require '../button/button'\n@require '../link/link'\n```\n\n### demo开发\n\n书写`html`即可，引入`mag-design.min.css`路径为：\n\n- 组件demo引入方式：\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"../mag-design.min.css\"\u003e\n```\n\n- example下demo引入方式：\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"../dist/mag-design.min.css\"\u003e\n```\n\n\n### 编译打包\n对`src`下的所有`styl`文件编译、压缩、打包到`dist`目录；将`src`和`example`下的`html`文件拷贝到`dist`下。\n\n```bash\nnpm run build\n```\n\n### 预览\n\n使用本地server预览组件。\n首先需要在对应组件下编写demo文件`index.html`。\n- 组件的demo路径：`src/xxx/index.html`\n- 页面级别(所有组件)的demo路径：`src/example/index.html`\n\n```bash\n# 预览单个组件demo\nnpm run preview button\n\n# 预览页面级别(所有组件)demo\nnpm run preview\n```\n\n### 提交\n\n```bash\n# add需要提交的文件\ngit add xxx\n\n# 提交一个commit\ngit commit -m 'xxxx'\n\n# 打包一个版本,通常打包小版本patch\nnpm version [patch | minor | major]\n\n# 提交源代码到仓库\ngit push\n\n# 发布npm包\nnpm publish\n```\n\n### 提交信息规范\n\ngit commit 信息和 pull request 标题必须遵循 MIP 项目的 [提交信息规范](https://github.com/mipengine/spec/blob/master/docs/commit-message-spec.md) ，否则不予合入。\n\n## License\n\u003ca href='https://github.com/mipengine/mip-mag-design/blob/master/LICENSE'\u003e\n    \u003cimg src='https://img.shields.io/github/license/mipengine/mip-mag-design.svg'  title='license' alt='license'\u003e\n\u003c/a\u003e\n\nCopyright (c) 2017-present, Baidu Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmipengine%2Fmip-mag-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmipengine%2Fmip-mag-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmipengine%2Fmip-mag-design/lists"}