zoukankan      html  css  js  c++  java
  • 一个小笔记,npm包发布方法,待修改。

    1、创建项目

    此处我使用的vuecli3命令

    vue create myplugins

    2、写组件

    写了一个notice组件,效果是弹出一个提示框,可以通过vue的方法进行调用,如this.$notice("xxxxx")

    <template>
        <div class="notice">
            <transition name="slide-fade">
                <div class="content" v-if=show_me>
                    {{ content }}
                    <div class="close" v-if="closed" @click="show_me = false;close()"></div>
                </div>
            </transition>
        </div>
    </template>
    
    <script>
        export default {
            name: 'notice',
            data() {
                return {
                    // visible: false,
                    content: '',
                    duration: 3000,
                    show_me: true,
                    closed: true
                }
            },
            methods: {
                setTimer() {
                    setTimeout(() => {
                        this.show_me = false;
                        this.close() // 3000ms之后调用关闭方法
                    }, this.duration)
                },
                close() {
                    // this.visible = false
                    setTimeout(() => {
                        this.$destroy(true)
                        if(this.$el.parentNode)
                        this.$el.parentNode.removeChild(this.$el) // 从DOM里将这个组件移除
                    }, 300)
                }
            },
            mounted() {
                this.setTimer() // 挂载的时候就开始计时,3000ms后消失
            }
        }
    </script>
    <style scoped>
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #edf2fc;
            background: #edf2fc;
            padding: 10px 10px 10px 15px;
            box-sizing: border-box;
            border-radius: 5px;
        }
    
        .close {
            display: inline-block;
             14px;
            height: 1px;
            background: #909399;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            vertical-align: middle;
            cursor: pointer;
        }
    
        .close::after {
            content: '';
            display: block;
             14px;
            height: 1px;
            background: #909399;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }
    
        .close:hover {
            background-color: #409EFF;
        }
    
        .close:hover::after {
            background-color: #409EFF;
        }
    
        .slide-fade-enter-active {
            transition: all .3s ease;
        }
    
        .slide-fade-leave-active {
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
    
        .slide-fade-enter,
        .slide-fade-leave-to {
            transform: translate(-50%, calc(-50% - 20px));
            opacity: 0;
        }
    </style>
    

      

    3、在同目录下创建index.js

    import Vue from 'vue'
    import notice from './notice.vue'
    const NoticeConstructor = Vue.extend(notice) // 直接将Vue组件作为Vue.extend的参数
    let nId = 1
    
    const Notice = (content,showClose = true) => {
        let id = 'notice-' + nId++
    
        const NoticeInstance = new NoticeConstructor({
            data: {
                content: content,//内容
                closed:showClose//是否显示关闭
            }
        }) // 实例化一个带有content内容的Notice
        NoticeInstance.id = id
        NoticeInstance.vm = NoticeInstance.$mount() // 挂载但是并未插入dom,是一个完整的Vue实例
        document.body.appendChild(NoticeInstance.vm.$el) // 将dom插入body
        NoticeInstance.vm.$el.style.zIndex = nId + 1001 // 后插入的Notice组件z-index加一,保证能盖在之前的上面
        return NoticeInstance.vm
    }
    
    export default {
        install: Vue => {
            Vue.prototype.$notice = Notice // 将Notice组件暴露出去,并挂载在Vue的prototype上
        }
    }
    

      

    4、修改package.json

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lib": "vue-cli-service build --target lib --name  mynpm --dest lib ./src/notice/index.js"
      },
      "main": "dist/mynpm.common.js",
      "private": false,
      "license": "MIT",
    

    5、创建并修改vue.config.js

    css: {
            extract: false, // 是否使用css分离插件 ExtractTextPlugin
    
        },
    

    6、修改ignore

    node_modules
    public/
    vue.config.js
    babel.config.js
    *.map
    *.html
    src/
    

      

    7、运行 lib 命令打包

    "lib": "vue-cli-service build --target lib --name  mynpm --dest lib ./src/notice/index.js"
    

      其中 target lib 调用vuecli3的库方法,--name mynpm 为输出文件名为mynpm , --dest lib为输出文件夹名字为lib , ./src/notice/index.js 为入口文件名

    8、登录、发布npm

    具体登陆发布方法就不写了

    npm login 
    npm publish
    

    备注,对于vue组件发布npm包而言,可以把第三步改为

    import Vue from "vue"
    import mycomponent from './dialog.vue'
    
    let MyPlugin = {
    	version: '1.0.0'
    };
    
    MyPlugin.install = function(Vue) {
    
    	if (this.installed) return;
    
    	Vue.component(mycomponent.name, mycomponent)
    
    };
    
    // auto install
    if (typeof window !== 'undefined' && window.Vue) {
    	MyPlugin.install(window.Vue);
    }
    
    Vue.use(MyPlugin)
    
    export default MyPlugin
    

      

  • 相关阅读:
    September 17th 2016 Week 38th Saturday
    【2016-09-16】UbuntuServer14.04或更高版本安装问题记录
    September 16th 2016 Week 38th Friday
    September 11th 2016 Week 38th Sunday
    September 12th 2016 Week 38th Monday
    September 10th 2016 Week 37th Saturday
    September 9th 2016 Week 37th Friday
    c++暂停
    八皇后问题
    ( 转转)Android初级开发第九讲--Intent最全用法(打开文件跳转页面等)
  • 原文地址:https://www.cnblogs.com/usebylgb/p/10900406.html
Copyright © 2011-2022 走看看