1 | <p style="background:#000;text-align:center;padding: 20px 0">
|
2 | <a href="https://matrix.58.com/)">
|
3 | <img style="width: 46px;
|
4 | height: 46px;display: inline-block;
|
5 | vertical-align: middle;" src="https://matrix.58.com/home/dist/img/logo.gif"/>
|
6 | <i style="font-size: 32px;
|
7 | color: #fff;
|
8 | display: inline-block;
|
9 | vertical-align: middle;">MATRIX</i>
|
10 | </a>
|
11 | </p>
|
12 |
|
13 | [![Build Status][travis-image]][travis-url] [![license][license-image]][license-url] [![javascript style guide][standard-image]][standard-url] [![version][version-image]][version-url]
|
14 |
|
15 | [travis-url]: https://www.travis-ci.org
|
16 | [travis-image]: https://img.shields.io/badge/build-passing-brightgreen.svg
|
17 | [standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
|
18 | [standard-url]: https://standardjs.com
|
19 | [license-image]: https://img.shields.io/badge/license-MIT-blue.svg
|
20 | [license-url]: demo/miniprogram-demo/LICENSE
|
21 | [version-image]: https://img.shields.io/badge/version-v0.0.9-blue.svg
|
22 | [version-url]: README.md
|
23 |
|
24 | > Better enable enterprise project in the background
|
25 |
|
26 | ## Intro
|
27 |
|
28 | 这是基于 [Vue](https://vuejs.org/) 的组件化实现,开发和服务于企业级产品,意旨在帮助开发者快速搭建属于自己的业务应用。
|
29 |
|
30 |
|
31 |
|
32 | ## Install
|
33 |
|
34 | #### npm 安装
|
35 | > 推荐使用npm的方式安装,能更好的和`webpack`等打包工具配合使用
|
36 | ``` bash
|
37 | npm install @bic-fe/mds-ui -S
|
38 | ```
|
39 |
|
40 | #### CDN 引用
|
41 | > 支持在页面上引入`Js`和`Css`文件既可以开始使用
|
42 |
|
43 | ```
|
44 | <!-- 引入样式 -->
|
45 | <link rel="stylesheet" href="https://unpkg.com/@bic-fe/mds-ui/dist/mds-ui.min.css">
|
46 | <!-- 引入组件库 -->
|
47 | <script src="https://unpkg.com/@bic-fe/mds-ui/dist/mds-ui.min.js"></script>
|
48 |
|
49 | ```
|
50 | `注意`:使用`CDN`引入`mds-ui`组件库需要在链接地址上锁定版本,避免组件库升级的时候带来兼容性的影响。锁定版本的方法为在连接后面增加版本号
|
51 |
|
52 | 目前可以通过 [unpkg.com/mds-ui](https://unpkg.com/browse/@bic-fe/mds-ui/) 获取到最新版本的资源,支持在页面上引入Js和Css文件既可以开始使用
|
53 |
|
54 | ## Quick Start
|
55 |
|
56 | #### 完整引入
|
57 |
|
58 | ```
|
59 | import Vue from 'vue'; // 引入Vue
|
60 | import '@bic-fe/mds-ui/dist/mds-ui.min.css'; // 引入组件的样式
|
61 | import MdsUi from '@bic-fe/mds-ui'; // 引入组件
|
62 |
|
63 | Vue.use(MdsUi); // 使用组件
|
64 |
|
65 | ```
|
66 |
|
67 | #### 按需引入
|
68 |
|
69 | 方法一:
|
70 |
|
71 | 可以通过下面的写法来按需加载组件
|
72 |
|
73 | ```
|
74 | import Button from '@bic-fe/mds-ui/dist/button';
|
75 | ```
|
76 | 方法二:
|
77 |
|
78 | 也可以使用 babel-plugin-import 来进行按需加载
|
79 |
|
80 | ```
|
81 | import { Button } from '@bic-fe/mds-ui';
|
82 | ```
|
83 | `.babelrc`修改
|
84 |
|
85 | ```
|
86 | {
|
87 | "plugins": [
|
88 | [
|
89 | "import", {
|
90 | "libraryName": "@bic-fe/mds-ui",
|
91 | "libraryDirectory": "dist",
|
92 | "styleLibraryDirectory": "dist/style",
|
93 | "style":true
|
94 | }
|
95 | ]
|
96 | ]
|
97 | }
|
98 |
|
99 | ```
|
100 | ## Browser Support
|
101 |
|
102 | Modern browsers and Internet Explorer 10+.
|
103 |
|
104 | ## License
|
105 |
|
106 | [MIT](http://opensource.org/licenses/MIT) |
\ | No newline at end of file |