vuecli3插件制作并发布

参考文章：
Vue cli3 插件开发并发布
vue-cli 3.x 开发插件并发布

1、利用vuecli3新建vue前端工程，并修改项目结构

image.png

2、新建plugins文件夹，用于存放插件文件

hello.vue代码

<template>
    <div id="helloId">
        <div class="number-panel">
            <p v-show="checkedNumber.length>0" class="number-show">{{checkedNumber}}</p>
            <ul>
                <li @click="clickThisNumber($event)" v-for="index in 9" :key="index">{{index}}</li>
                <li @click="clickThisNumber($event)">0</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'test-hello',
        data() {
            return {
                checkedNumber: ''
            }
        },
        components: {},
        methods: {
            clickThisNumber(e) {
                this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML)
            }
        }
    }
</script>

<style scoped>
    #helloId {
        position: absolute;
        top: 20px;
        left: 20px;
        border: 1px solid #22EE22;
        z-index: 100;
    }

    .number-show {
        background-color: #ffffff;
        height: 37px;
    }

    .number-panel ul {
        padding: 0;
    }

    .number-panel ul li {
        display: inline-block;
        width: 28%;
        height: 50px;
        line-height: 50px;
        margin-top: 20px;
        background: #ddd;
        border-radius: 8px;
        margin-right: 10px;
    }

    .number-panel ul li input {
        display: none;
    }
</style>

hello2.vue代码

<template>
    <div id="hello2Id">
        <div class="toast" ref='toastPosition' :class="{active: toastHidden}">
            <div class="toast-warpper">
                {{text}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'test-hello2',
        data() {
            return {
                text: '',
                toastHidden: false
            }
        },
        created() {
            // this.toastPlugin()
        },
        components: {},
        methods: {
            hello2Test(msg, time) {
                this.text = msg
                this.toastHidden = true
                setTimeout(() => {
                    this.toastHidden = false
                }, time)
            }
        }
    }
</script>

<style scoped>
    #hello2Id {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 100;
    }

    .toast {
/*      position: absolute;
        left: 50%;
        top: 50%; */
        transform: translate(-50%, -50%);
        width: 0px;
        min-height: 0px;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        color: #fff;
        transition: all 0.5s;
        opacity: 0;
      }
      .toast.active {
        width: 150px;
        min-height: 25px;
        opacity: 1;
      }
</style>

helloPlugin.js代码

import hello from './hello.vue'
import hello2 from './hello2.vue'

let helloPlugin = {}

helloPlugin.install = function(Vue, options){
    
    Vue.prototype.$msg = "hello plugin";
    
    Vue.prototype.$sayHello = function(arr){
        if(arr.length < 0){
            return false
        }else{
            arr = arr.join('-');
            return arr;
        }
    }
    
    Vue.component(hello.name, hello)
    Vue.component(hello2.name, hello2)
}

export default helloPlugin

3、修改package.json

{
  "name": "wzf_vuecli3_plugin",
  "version": "0.1.0",
  "private": false,
  "main": "lib/helloPlugin.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name helloPlugin --dest lib plugins/hello/helloPlugin.js"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.2.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

4、修改vue.config.js文件

module.exports = {
    css: {
        extract: false
    }
}

5、修改.gitignore

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


/plugins
/public
/src
vue.config.js

6、在项目目录下运行 npm run lib命令，成功后会生成lib文件夹

7、在项目目录下运行 npm publish 命令，成功后会在npm官网自己用户名的仓库下看到发布的插件。

8、运用插件

#下载插件
npm install 插件名称 --save

#使用插件（在main.js里）
import 插件名称 from '插件名称'
Vue.use(插件名称)