vue-components-webpack4

UI component library template based on webpack4 + babel7 + vue implementation

Install

Using npm:

# Requried axios lib
# npm i axios --save
npm install sk-element-webpack --save

Using a script tag for global use:

<!-- import CSS -->
<link rel="stylesheet" href="//xxx.xxx.com/dist/theme-default/index.css">
<!-- import JavaScript -->
<script type="text/javascript" src="//xxx.xxx.com/dist/sk-element.min.js"></script>

Usage

Fully import

In main.js:

import Vue from "vue";
import SKElement from "sk-element-webpack";
import App from "./App.vue";

Vue.use(SKElement);

new Vue({
  el: "#app",
  render: h => h(App)
});

On demand

With the help of babel-plugin-component, we can import components we actually need, making the project smaller than otherwise.

First, install babel-plugin-component:

npm install babel-plugin-component --save-dev

Then edit .babelrc/babel.config.js:

{
  "presets": [
    // other config
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "sk-element-webpack",
        "libDir": "dist",
        "styleLibrary": {
          "name": "theme-default",
          "base": false
        }
      }
    ]
  ]
}

Next, if you need Text and other component, edit main.js:

import Vue from "vue";
import { Text } from "sk-element-webpack";
import App from "./App.vue";

Vue.component(Text.name, Text);
/* or
 * Vue.use(Text)
 */

new Vue({
  el: "#app",
  render: h => h(App)
});

Features

• Support on-demand loading
• I18n
• Add CLI to support rapid development
• Example docs with vuepress
• Unit Test
• CSS dynamic separation