例如在/src/packages/test123/index.vue目录文件中开发需要发布的插件。
package.json文件配置(只列出了用到的配置,其他配置此处省略了)
{
"name": "test123", // 插件名称
"version": "1.0.0", // 版本号
"private": false, // 是否私有
"main": "dist/test123.umd.min.js", // 插件发布的文件入口
"style": "dist/test123.css",
"scripts": {
"lib": "vue-cli-service build --target lib --name test123 ./src/packages/test123/index.vue"
// vue-cli-service build --target lib --name 构建后的文件名称 需要构建文件的地址
}
执行命令:npm run lib
注:每次执行后dist文件会生成test123.umd.min.js(用test123.umd.js文件也可以)、test123.css这两个需要用到的文件(在package.json文件中与main、style属性值相对应),还会生成一个demo.html可以看一下具体引入及使用方法。
发布命令:npm publish(发布前请先查阅文章末尾的特别注意)
注:关于npm发包和版本等其他命令可参考文章 https://blog.****.net/Dalin0929/article/details/143861235
项目应用:
安装依赖:npm i test123 --save
页面使用:
<template>
<test123></test123>
</template>
<script>
import test123 from 'test123/dist/test123.umd.js';
import 'test123/dist/test123.css';
export default {
components: { test123 }
}
</script>