abpx-design

The package is provided web components and utilities based on vue and element-ui.

Usage no npm install needed!

<script type="module">
  import abpxDesign from 'https://cdn.skypack.dev/abpx-design';
</script>

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,开发环境引入本地即可。