欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么制作Vue組件庫(kù)并發(fā)布到npm

這篇文章主要講解了“怎么制作Vue組件庫(kù)并發(fā)布到npm”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么制作Vue組件庫(kù)并發(fā)布到npm”吧！

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為達(dá)州等服務(wù)建站，達(dá)州等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為達(dá)州企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

怎么制作Vue組件庫(kù)并發(fā)布到npm

1、新建文件夾在終端打開(kāi)執(zhí)行 npm init -y

生成package.json如下,注意如果要發(fā)布到npm,name不能有下劃線,大寫(xiě)字母等

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

2、建立目錄結(jié)構(gòu)

目錄結(jié)構(gòu)如下

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

3、本地調(diào)試

  • vueComponentDi/index.js

export default function(){
    console.log('本地調(diào)試')
}

  • 新建一個(gè)vue項(xiàng)目

vue create testvue

在testvue下的package.json下的測(cè)試依賴devDependencies添加vueComponentDi/index.js絕對(duì)地址

"devDependencies": {
    ...
    "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根據(jù)自己實(shí)際項(xiàng)目地址填寫(xiě)
    ...
    }

  • 執(zhí)行npm link

在testvue執(zhí)行npm link將vuecomponentdi軟鏈接到node_modules中

  • vuecomponentdi安裝Eslint

由于testvue引入組件會(huì)進(jìn)行Eslint檢測(cè),不安裝會(huì)報(bào)錯(cuò)(testvue關(guān)閉Eslint可省略這一步)

安裝方法:

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

  • 在testvue使用vuecomponentdi

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>

控制臺(tái)打印>本地調(diào)試

4、開(kāi)發(fā)一個(gè)button組件

  • button模塊:進(jìn)入vueComponentDi/packages/button/index.vue

type只支持傳入primary屬性,v-on="listeners"表示包含了父作用域中的(不含.native修飾器的)v?on事件監(jiān)聽(tīng)器。它可以通過(guò)v?on="listeners"表示包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="listeners"表示包含了父作用域中的(不含.native修飾器的)v?on事件監(jiān)聽(tīng)器。它可以通過(guò)v?on="listeners" 傳入內(nèi)部組件

<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模塊導(dǎo)出:進(jìn)入vueComponentDi/packages/button/index.js

如果導(dǎo)出一個(gè)帶有install函數(shù)的對(duì)象,則在Vue2中可以直接使用Vue.use(xx)調(diào)用此函數(shù),既執(zhí)行 Vue.component(name,option)創(chuàng)建了一個(gè)組件

import button from "./index.vue"
button.install=(Vue)=>{
    Vue.component(button.name,button)
}
export default button

  • 聚合導(dǎo)出button:進(jìn)入vueComponentDi/index.js

因?yàn)殚_(kāi)發(fā)的組件不止一個(gè),所以需要在入口文件統(tǒng)一導(dǎo)出

import diButton from "./packages/button"
export {
    diButton
}

  • 在testvue使用

<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、開(kāi)發(fā)一個(gè)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模塊導(dǎo)出:vueComponentDi/packages/toast/index.js

因?yàn)閠oast彈窗需要在vue中支持this.$toast調(diào)用,所以用了Vue.extend方法,這個(gè) API 在日常開(kāi)發(fā)中很少使用,一般在開(kāi)發(fā)組件的時(shí)候它才能派上用場(chǎng),官方定義:使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象

import toast from './index.vue'
toast.install = (Vue) => {
    const toastConstructor = Vue.extend(toast);//使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。
    let $vm = new toastConstructor();//將這個(gè)子類(lèi)實(shí)例化
    let $el = $vm.$mount().$el;//$vm執(zhí)行$mount()手動(dòng)掛載會(huì)返回一個(gè)帶有$el的對(duì)象,$el就是一個(gè)dom對(duì)象
    document.querySelector("body").appendChild($el);//將這個(gè)dom對(duì)象添加到body中
    //在Vue原型上注入$toast方法
    Vue.prototype.$toast = (option) => {
        $vm.show = true
        if (!(option instanceof Object)) {
            //如果傳的不是對(duì)象直接彈出
            $vm.message = option
        } else {
            $vm.message = option.message
            $vm.type = option.type
        }
        setTimeout(() => {
            $vm.show = false
        }, 2000)
    }
}


export default toast

  • 聚合導(dǎo)出:vueComponentDi/index.js

import diButton from "./packages/button" 
import toast from "./packages/toast" 

export {
    diButton,
    toast
}

  • vuetest中使用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("這是一個(gè)普通彈窗");
      // this.$toast({
      //   message: "這是一個(gè)成功彈窗",
      //   type: "success",
      // });
      this.$toast({
        message: "這是一個(gè)警告彈窗",
        type: "warning",
      });
    },
  },
};
</script>

6、發(fā)布到npm

  • 公有配置

組件開(kāi)發(fā)完成需要發(fā)布到npm以便于別人使用;因?yàn)榘l(fā)布的是公有包,所以需要在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"
  }
}

  • 發(fā)布

npm發(fā)布很簡(jiǎn)單,只需要兩個(gè)命令:

npm login
npm publish

執(zhí)行npm login需要你有npm賬號(hào)，可以到 npm官網(wǎng)注冊(cè)

npm官網(wǎng)地址：https://www.npmjs.com/

發(fā)布完成之后就可以在任何一個(gè)vue2項(xiàng)目中安裝使用了:

npm install vuecomponentdi

感謝各位的閱讀，以上就是“怎么制作Vue組件庫(kù)并發(fā)布到npm”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么制作Vue組件庫(kù)并發(fā)布到npm這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前名稱：怎么制作Vue組件庫(kù)并發(fā)布到npm
文章出自：http://chinadenli.net/article26/gdjdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、小程序開(kāi)發(fā)、商城網(wǎng)站、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)