初探 vue 插件開發

時間 2019-11-11

標籤初探 vue 插件開發简体版

原文原文鏈接

目標：開發一個 vue 插件，發佈到npm而且，能夠使用 npm 安裝。javascript

vue list 查看當前在線的模板信息

步驟以下：css

1. 初始化項目

vue init webpack-simple projectName

運行項目：html

cd projectName
npm install
npm run dev

2. 寫插件

在 src 文件夾下面建 lib 文件夾，用於存放插件。lib 文件夾下再建 toast.js 和 toast.vue 兩個文件。整個項目目錄以下所示：vue

toast.vue 的內容以下：java

<template>
    <div class="vue-toast-wraper" v-show="isShow">
        {{msg}}
    </div>
</template>
<script>
export default {
    name:'toast',
    props:{
        msg:{
            default:"",
            type:String
        },
        isShow:{
            default:false,
            type:Boolean
        }
    },
    mounted(){
        if(this.isShow){
            setTimeout(() => {
                this.isShow = false
            },2500);
        }
    }
}
</script>
<style scoped>
.vue-toast-wraper{
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 17px;
    padding: 10px;
    border-radius:12px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
</style>

toast.vue 是作一個彈出提示，其中傳入的參數有兩個：toastMsg 和 isSHowToast，分別表示提示消息以及是否顯示提示。webpack

toast.js 中寫 install 方法，內容以下：git

import VueToastPlugin from './toast.vue'
const toastPlugin = {
    install: function(Vue) {
        Vue.component(VueToastPlugin.name, VueToastPlugin)
    }
}
// global 狀況下 自動安裝
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(toastPlugin)
}
// 導出模塊
export default toastPlugin

3. 本地測試web

本插件的功能就這麼多，由於咱們還沒有發佈，因此先進行本地測試。npm

3.1 將 App.vue 多餘代碼刪除。json

3.2 在 main.js 中引入

import Vue from 'vue'
import App from './App.vue'

import Toast from './lib/toast.js'
Vue.use(Toast)

new Vue({
  el: '#app',
  render: h => h(App)
})

3.3 在 App.vue 中使用 toast （別忘記須要傳遞的參數）

<template>
  <div id="app">
    <toast :msg = "'測試'" :isShow = "true"/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
</style>

3.4 本地測試的結果，如圖，是所指望的

4. 配置打包

本地測試沒有問題事後，咱們就能夠準備一下修改配置，爲打包發佈作準備。

4.1 修改 webpack.config.js

關於 library 的詳解。

4.2 修改 package.json

4.3 修改 .gitignore 文件

去掉 dist。

4.4 修改 index.html文件

<body>
    <div id="app"></div>
    <script src="/dist/toast.js"></script>
  </body>

4.5 項目打包

npm run build

5. 在npm上發佈

5.1 註冊npm帳號

移步 npm 官網。

5.2 本地控制檯登陸 npm 帳號

npm adduser

5.3 發佈

npm publish

參考文檔：

01. 《vue 插件開發教程與發佈》 CSDN ，做者：吹過麥田的風；

02. 《Vue 插件開發與發佈》 CSDN，做者：白雲隨風飄；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。