m2-ui
Version:
The package is provided web components and utilities based on vue and element-ui.
124 lines (101 loc) • 2.86 kB
Markdown
[](https://github.com/miracle-git/m2.git) <br/>
> The package is provided web components and utilities based on vue and element-ui.
本节将介绍如何在项目中使用M2组件库。
```bash
npm install m2-ui
```
可以采取以下三种引入方式：
- 全量引入
- 按需引入
- CDN引入
在 main.js 中写入以下内容：
```javascript
import '~m2-ui/lib/theme-grace/index.css'; // 也可放在App.vue中引入
import Vue from 'vue';
import M2 from 'm2-ui';
import App from './App.vue';
Vue.use(M2);
new Vue({
el: '#app',
render: h => h(App)
});
```
**注意：样式文件需要单独引入(此时不要在babel中配置按需加载选项)。**
借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
```bash
npm install babel-plugin-component -D
```
然后，将 .babelrc 修改为：
```json
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "m2-ui",
"styleLibraryName": "theme-grace"
}
]
]
}
```
接下来，如果你只希望引入部分组件，比如 只需要引入素材通用模块中的Content（latex转义html解析），那么需要在 main.js 中写入以下内容：
```javascript
import Vue from 'vue';
import { BackTop, Scroll } from 'm2-ui';
import App from './App.vue';
Vue.component(BackTop.name, BackTop);
Vue.component(Scroll.name, Scroll);
/* 或写为
* Vue.use(BackTop)
* Vue.use(Scroll)
*/
new Vue({
el: '#app',
render: h => h(App)
});
```
**注意：按需加载不需要单独引入样式文件。**
首先配置webpack.base.conf.js (也可在默认的webpack.config.js） 将m2-ui加入到externals中：
```javascript
module.exports = {
...,
externals: {
'm2-ui': 'M2'
}
}
```
**注意：CDN引入不需要安装m2-ui。**
其次在main.js中引入m2-ui：
```javascript
import Vue from 'vue';
import M2 from 'm2-ui';
Vue.use(M2);
```
最后在index.html中引入对应的脚本与样式：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>M2 CDN引入</title>
<link rel="stylesheet" href="./node_modules/m2-ui/lib/theme-grace/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./node_modules/m2-ui/lib/index.js"></script>
<script src="./node_modules/m2-ui/lib/umd/locale/zh-CN.js"></script>
</body>
</html>
```
**注意：样式与脚本可在线上环境来自于CDN，开发环境引入本地即可。**