m2-ui
v1.1.6
Published
The package is provided web components and utilities based on vue and element-ui.
Downloads
14
Maintainers
mirheReadme
m2-ui
The package is provided web components and utilities based on vue and element-ui.
本节将介绍如何在项目中使用M2组件库。
安装
npm install m2-ui引入
可以采取以下三种引入方式：
- 全量引入
- 按需引入
- CDN引入
完整引入
在 main.js 中写入以下内容：
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，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D然后，将 .babelrc 修改为：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "m2-ui",
"styleLibraryName": "theme-grace"
}
]
]
}接下来，如果你只希望引入部分组件，比如 只需要引入素材通用模块中的Content（latex转义html解析），那么需要在 main.js 中写入以下内容：
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)
});注意：按需加载不需要单独引入样式文件。
CDN引入
首先配置webpack.base.conf.js (也可在默认的webpack.config.js） 将m2-ui加入到externals中：
module.exports = {
...,
externals: {
'm2-ui': 'M2'
}
}注意：CDN引入不需要安装m2-ui。
其次在main.js中引入m2-ui：
import Vue from 'vue';
import M2 from 'm2-ui';
Vue.use(M2);最后在index.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，开发环境引入本地即可。