xyz-button

An Vue UI Button Component!

# install cli 
$ yarn global add @vue/cli
$ yarn global add @vue/cli-service-global
 
# uninstall cli 
$ yarn global remove @vue/cli
$ yarn global remove @vue/cli-service-global
 

# dev build tools 
$ yarn add -D bili rollup-plugin-vue vue-template-compiler
 

 
// "devDependencies": {
//     "bili": "^3.4.2",
//     "rollup-plugin-vue": "^4.6.1",
//     "vue-template-compiler": "^2.5.22"
// }
 

publish

$ npm list l
$ npm list --json
 
$ npm whoami
 
$ npm info
 
$ npm adduser
 
$ npm publish
 

usage

# install 
$ yarn add xyz-button
# OR 
$ npm i xyz-button
 

import Vue from "vue";
import XyzButton from "xyz-button";
 
Vue.use(XyzButton);
 

 
<!-- error -->
<xyz-button
    corpObj=""
/>
 
<!-- OK -->
<xyz-button
    :corpObj="corpObj"
/>
<xyz-button
    :corpObj="corpObj2"
/>
 

// events ???
 
<nice-handsome-button
    :rounded="true"
    color="red"
    size="large">
    My Button
</nice-handsome-button>
 
 
<nice-handsome-button
    @click="AutoSkipToPage(`newsinfo/iframe`)"
    :rounded="true"
    color="red"
    size="large">
    click Button 1
</nice-handsome-button>
<!-- dblclick & mobile bug -->
<nice-handsome-button
    @dblclick="AutoSkipToPage(`newsinfo/iframe`)"
    :rounded="true"
    color="red"
    size="large">
    dblclick Button 2
</nice-handsome-button>
<!-- dblclick & components -->
<nice-handsome-button
    @dblclick.native="AutoSkipToPage(`newsinfo/iframe`)"
    :rounded="true"
    color="red"
    size="large">
    dblclick Button 3
</nice-handsome-button>
 

npm

https://www.npmjs.com/package/xyz-button

refs

https://www.telerik.com/blogs/vuejs-how-to-build-your-first-package-publish-it-on-npm

bili

extractCSS

 
module.exports = {
    banner: true,
    output: {
        extractCSS: true,
        // extractCSS: false,
    },
    plugins: {
        vue: {
            css: true
        },
    },
};