sk-element-webpack

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:

<script type="text/javascript" src="sk-element.min.js"></script>

Note: We have not extracted CSS file. Because we are going to standardize the style of the component.

If you want to extract it, please refer to webpack mini-css-extract-plugin plugin.

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",
        "style": 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