• 技术文章 >web前端 >Vue.js

    如何从0撸出一个Vue组件库并发布到npm

    青灯夜游青灯夜游2022-01-13 18:38:21转载127
    如何从0撸出一个Vue组件库并发布到npm?下面本篇文章手把手带大家从0开发一个Vue组件库,看看怎么发布到npm,希望对大家有所帮助。

    1、新建文件夹在终端打开执行 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"
    }

    2、建立目录结构

    目录结构如下

    -- vueComponentDi
        -- packages
            -- button
                -- index.js
                -- index.vue
            -- toast
                -- index.js
                -- index.vue
        -- index.js
        -- package.json

    3、本地调试

    export default function(){
        console.log('本地调试')
    }
    vue create testvue

    在testvue下的package.json下的测试依赖devDependencies添加vueComponentDi/index.js绝对地址

    "devDependencies": {
        ...
        "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根据自己实际项目地址填写
        ...
        }

    在testvue执行npm link将vuecomponentdi软链接到node_modules中

    由于testvue引入组件会进行Eslint检测,不安装会报错(testvue关闭Eslint可省略这一步)

    安装方法:

     npm install eslint@6.7.2 --save-dev
     ./node_modules/.bin/eslint --init

    import test from "vuecomponentdi"

    <template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import test from "vuecomponentdi"
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      created(){
        test()
      }
    }
    </script>

    控制台打印>本地调试

    4、开发一个button组件

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

    <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>

    如果导出一个带有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

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

    import diButton from "./packages/button"
    export {
        diButton
    }
    <template>
      <div class="home">
        <di-button type="primary">按钮</di-button>
      </div>
    </template>
    <script>
    // @ is an alias to /src
    
    import Vue from 'vue'
    import {diButton} from "vuecomponentdi"
    Vue.use(diButton)
    export default {
      name: 'Home'
    }
    </script>

    5、开发一个toast弹窗

    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弹窗需要在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
    import diButton from "./packages/button" 
    import toast from "./packages/toast" 
    
    export {
        diButton,
        toast
    }
    <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>

    6、发布到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官网 注册

    npm官网地址:https://www.npmjs.com/

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

    npm install vuecomponentdi

    git地址: vue组件开发(https://gitee.com/geeksdidi/vue-component-di)

    【相关推荐:vue.js教程

    以上就是如何从0撸出一个Vue组件库并发布到npm的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue组件 发布npm
    上一篇:带你深入了解vue中的v-model! 下一篇:聊聊 vue2.x + turn.js 如何实现翻书效果

    相关文章推荐

    • 解析源码,看看 vue 编译器是怎么生成渲染函数的!• 深入聊聊Vue中的一些常用指令• Vue3.2已发布,带来了这些新特性!• 带你深入了解vue中的v-model!• 利用Taro + Vue3如何开发小程序?(实践)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网