vue 基于vue-cli3 发布npm 插件

第一步 创建vue项目

vue create plugin-dev

新建 packages文件夹

创建插件包

sjf-plugin\packages\checkList\

        checkList.vue  checkList.vue是组件代码

        index.js 插件的单独引入

// 引入组件
import checkList from './checkList.vue'
 
// 为组件提供 install 安装方法,供按需引入
checkList.install = (Vue) => {
  Vue.component(checkList.name, checkList)
}
 
// 导出组件
export default checkList

sjf-plugin\packages\index.js 总的外层js的单独编写

import checkList from './checkList/checkList.vue'
// 存储组件列表
const components = [
    checkList
]
/* 
  定义install 方法,接收Vue作为参数,如果使用use注册插件,则所有的组件都将被注册
*/
const install = function (Vue) {
    // 判断是否安装
    if (install.installed) { return }
    // 遍历所有组件
    components.map(item => {
        Vue.component(item.name, item)
    })
}
// 判断是否引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install,
    checkList
}

运行命令

    "build-lib": "vue-cli-service build --target lib --name sjf --dest lib packages/index.js"

       --target <类型> --name <文件名> --dest <文件夹名> <生成文件的路径>

packages.json 配置文件

{
  "name": "songjiafeng",//项目名称
  "version": "0.1.2",//版本号更新时要修改
  "private": false,//是否是私有 发布时要改成false
  "main":"lib/sjf.umd.min.js",//入口文件,该字段需指向我们最终编译后的包文件。
  "keywords":[//npm 搜索的关键字
    "vue",
    "check"
  ], 
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-lib": "vue-cli-service build --target lib --name sjf --dest lib packages/index.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

发布时的问题

1,npm login 

输入        没有账户的话去 npm官网注册 

用户名

密码

邮箱

如果登录失败可能是协议错了 记得改成 https

2,npm publish 发布

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值