0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点#——如何创建一个vue库并发布到npm

新建文件夹在终端打开执行 npm init -y

生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等

{
"name": "vuecomponentdi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
建立目录结构

目录结构如下

-- vueComponentDi
-- packages
-- button
-- index.js
-- index.vue
-- toast
-- index.js
-- index.vue
-- index.js
-- package.json
开发一个button组件
  • button模块:进入vueComponentDi/packages/button/index.vue

            type只支持传入primary属性。v-on = "listemers"表示包含了父作用域中的(不含.native修饰符的)v−on事件监听器,它可以通过v−on="listemers"表示包含了父作用域中的(不含.native修饰符的) v-on事件监听器,它可以通过v-on="listemers"表示包含了父作用域中的(不含.native修饰符的)v−on事件监听器,它可以通过v−on="listerners"传入内部组件

    <template>
    <div>
    <button class="di-button" v-on="$listeners" :class="[type?`di-button--${type}`:'']"><slot></slot></button>
    </div>
    </template>
    <script>
    export default {
    name:"di-button",
    props:{
    type:String
    }
    }
    </script>
    <style>
    .di-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    }
    .di-button:focus, .di-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
    }
    .di-button:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none;
    }
    .di-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    }
    .di-button--primary:focus, .di-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
    }
    .di-button--primary.is-active, .di-button--primary:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
    }
    </style>
    • button模块导出:进入vueComponentDi/packages/button/index.js

    如果导出一个带有install函数的对象,则在Vue2中可以直接使用Vue.use(xx)调用此函数,既执行 Vue.component(name,option)创建了一个组件

    import button from "./index.vue"
    button.install=(Vue)=>{
    Vue.component(button.name,button)
    }
    export default button
    • 聚合导出button:进入vueComponentDi/index.js

    因为开发的组件不止一个,所以需要在入口文件统一导出

    import diButton from "./packages/button"
    export {
    diButton
    }
    开发一个toast弹窗
    • toast模块:vueComponentDi/packages/toast/index.vue

    type只支持warning和success

    <template>
    <div class="di-toast" :class="`di-toast--${type}`" v-if="show">
    {{message}}
    </div>
    </template>
    <script>
    export default {
    data(){
    return {
    message:'',
    show:false,
    type:''
    }
    }
    }
    </script>
    <style>
    .di-toast{
    width: 60%;
    width: 200px;
    background: rgb(15, 15, 15);
    padding:3px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    position: fixed;
    left: calc(50% - 100px);
    top: 200px;
    }
    .di-toast--warning{
    background: #FDF6EC;
    color: #E6A28B;
    }
    .di-toast--success{
    background: #F0F9EB;
    color: #93C26D;
    }
    </style>
    • toast模块导出:vueComponentDi/packages/toast/index.js

    因为toast弹窗需要在vue中支持this.$toast调用,所以用了Vue.extend方法,这个 API 在日常开发中很少使用,一般在开发组件的时候它才能派上用场,官方定义:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象

    import toast from './index.vue'
    toast.install = (Vue) => {
    const toastConstructor = Vue.extend(toast);//使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
    let $vm = new toastConstructor();//将这个子类实例化
    let $el = $vm.$mount().$el;//$vm执行$mount()手动挂载会返回一个带有$el的对象,$el就是一个dom对象
    document.querySelector("body").appendChild($el);//将这个dom对象添加到body中
    //在Vue原型上注入$toast方法
    Vue.prototype.$toast = (option) => {
    $vm.show = true
    if (!(option instanceof Object)) {
    //如果传的不是对象直接弹出
    $vm.message = option
    } else {
    $vm.message = option.message
    $vm.type = option.type
    }
    setTimeout(() => {
    $vm.show = false
    }, 2000)
    }
    }


    export default toast
    • 聚合导出:vueComponentDi/index.js
    <template>
    <div class="home">
    <di-button type="primary" @click="toast">按钮</di-button>
    </div>
    </template>
    <script>
    // @ is an alias to /src

    import Vue from "vue";
    import { diButton, toast } from "vuecomponentdi";
    Vue.use(diButton);
    Vue.use(toast);
    export default {
    name: "Home",
    methods: {
    toast() {
    // this.toast("这是一个普通弹窗");
    // this.$toast({
    // message: "这是一个成功弹窗",
    // type: "success",
    // });
    this.$toast({
    message: "这是一个警告弹窗",
    type: "warning",
    });
    },
    },
    };
    </script>
    发布到npm
    • 公有配置

    组件开发完成需要发布到npm以便于别人使用;因为发布的是公有包,所以需要在vueComponentDi/package.json中配置

    "publishConfig": {
    "access": "public"
    },

    完整package.json:

    {
    "name": "vuecomponentdi",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^8.2.0"
    },
    "publishConfig": {
    "access": "public"
    }
    }
    • 发布

    npm发布很简单,只需要两个命令:

    npm login
    npm publish

    执行npm login需要你有npm账号,可以到 ​​npm官网​​ 注册

    发布完成之后就可以在任何一个vue2项目中安装使用了:

    npm install vuecomponentdi
    举报

    相关推荐

    发布一个npm组件库包

    0 条评论