vue 基于vue-cli3 发布npm 插件

最新推荐文章于 2023-10-19 14:04:47 发布

丰的传说

最新推荐文章于 2023-10-19 14:04:47 发布

阅读量255

点赞数

分类专栏： vue npm 插件封装文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/qq_42389674/article/details/125462536

版权

vue npm 插件封装专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步创建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"
  ]
}