w-component-vue

A simple component for vue(vue2).

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

all components: web [source code]

Installation

Using npm(ES6 module):

Note: w-component-vue is mainly dependent on vuetify and @mdi/js.

npm i w-component-vue

Import all components:

//choose component
<w-text
    ...
></w-text>

//import
import WComponentVue from 'w-component-vue'

//use
Vue.use(WComponentVue)

Import one component:

//choose component
<w-text
    ...
></w-text>

//import
import WText from 'w-component-vue/src/components/WText.vue'

//component
Vue.component('w-text',WText)
//or
export default {
    components: {
        WText,
        //or
        'w-text': WText,
    },
    ...
}

In a browser(UMD module):

Note: umd file of w-component-vue is mainly dependent on vue and vuetify.

[Optional] Add script with nomodule for IE11.

<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script>

[Necessary] Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

[Optional] Add link for icon.

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet">

[Necessary] Add script and link for vuetify.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

[Necessary] Add script for w-component-vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-component-vue.umd.js"></script>

Directly use:

//app and component
<div id="app">
    <w-text
        ...
    ></w-text>
</div>

//use
Vue.use(window['w-component-vue'])

//new
new Vue({
    el: '#app',
    data: {
        ...
    }
})