README
abpx-design
基于 Vue 和 Element UI 创建的业务中台 PC 端组件库。
安装
npm install abpx-design
引入
可以采取以下三种引入方式:
- 全量引入
- 按需引入
- CDN 引入
全量引入
在 main.js 中写入以下内容:
import '~abpx-design/lib/theme-chalk/index.css' // 也可放在App.vue中引入
import Vue from 'vue'
import Abpx from 'abpx-design'
import App from './App.vue'
Vue.use(Abpx)
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": "abpx-design",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来,如果你只希望引入部分组件,比如 只需要引入素材通用模块中的 Content(latex 转义 html 解析),那么需要在 main.js 中写入以下内容:
import Vue from 'vue'
import { RouterView, Table, Link } from 'abpx-design'
import App from './App.vue'
Vue.component(RouterView.name, RouterView)
Vue.component(Table.name, Table)
Vue.component(Link.name, Link)
/* 或写为
* Vue.use(RouterView)
* Vue.use(Table)
* Vue.use(Link)
*/
new Vue({
el: '#app',
render: h => h(App)
})
注意:按需加载不需要单独引入样式文件。
CDN 引入
首先配置 webpack.base.conf.js (也可在默认的 webpack.config.js) 将 abpx-design 加入到 externals 中:
module.exports = {
...,
externals: {
'abpx-design': 'Abpx'
}
}
注意:CDN 引入不需要安装 abpx-design
其次在 main.js 中引入 abpx-design
import Vue from 'vue'
import Abpx from 'abpx-design'
Vue.use(Abpx)
最后在 index.html 中引入对应的脚本与样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Abpx CDN引入</title>
<link rel="stylesheet" href="./node_modules/abpx-design/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./node_modules/abpx-design/lib/index.js"></script>
<script src="./node_modules/abpx-design/lib/umd/locale/zh-CN.js"></script>
</body>
</html>
注意:样式与脚本可在线上环境来自于 CDN,开发环境引入本地即可。