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
    评论
### 回答1: vue-cli-plugin-multi-page是一个Vue CLI插件,它的功能是用于创建多页应用的模板和配置。 首先,我们需要了解Vue CLI。Vue CLI是一个用于快速构建Vue.js应用的脚手架工具,它提供了一些默认的配置和构建工具,使我们可以更轻松地开发Vue项目。 而vue-cli-plugin-multi-page插件则扩展了Vue CLI的功能,允许我们通过简单的命令或配置来创建多页应用。多页应用是指一个项目中有多个HTML页面,每个页面是一个独立的单页应用。 使用这个插件,我们可以方便地创建多个页面,每个页面都有自己的入口文件、模板和路由配置。我们只需要在项目中执行相应的命令或编辑配置文件,就可以自动生成多页应用的基本结构。 此外,vue-cli-plugin-multi-page还支持通过npm安装,这使得我们能够更加轻松地将其集成到我们正在开发的项目中。 总之,vue-cli-plugin-multi-page是一个非常实用的Vue CLI插件,它为我们开发多页应用提供了便利的模板和配置。通过它,我们可以快速创建多个页面,并享受到Vue CLI提供的其他一系列开发便捷功能。 ### 回答2: vue-cli-plugin-multi-page/plugin npm 是一个 Vue CLI 插件,它可以帮助我们在 Vue.js 项目中快速创建多页面应用,并且可以通过 npm 进行安装和管理。 Vue CLI 是一个脚手架工具,它可以帮助我们快速构建和管理 Vue.js 项目。而 vue-cli-plugin-multi-page 则是针对多页面应用的插件,它扩展了 Vue CLI 的功能,使我们可以轻松创建多个页面,并且每个页面都具有独立的入口文件、路由配置和其他自定义设置。 使用 npm 进行安装和管理插件是非常方便的。我们只需要在终端中执行 npm 命令,如 npm install vue-cli-plugin-multi-page,就可以将该插件安装到我们的项目中。安装完成后,我们可以在项目的配置文件中进行插件的相关设置,例如指定多页面应用的入口文件、路由配置、页面模板等。 通过 vue-cli-plugin-multi-page/plugin npm,我们可以避免手动配置多页面应用的繁琐工作。插件提供了一些预设的功能和配置选项,使我们能够更快速、更灵活地创建和管理多页面应用。同时,使用 npm 来安装和管理插件,也使我们可以方便地更新、升级插件版本,以及与其他依赖项进行配合使用。 总而言之,vue-cli-plugin-multi-page/plugin npm 是一个便捷的工具,它可以帮助我们使用 Vue CLI 快速创建多页面应用,并通过 npm 进行方便的安装和管理。 ### 回答3: vue-cli-plugin-multi-page/plugin npm 是一个用于 Vue.js插件,可以帮助开发者在使用 Vue CLI 创建多页面应用时更方便地管理页面。 首先,Vue CLI 是 Vue.js 官方提供的一个脚手架工具,用于快速搭建 Vue.js 项目的基础结构。然而,Vue CLI 默认情况下只支持单页面应用。对于需要创建多个页面的项目,就需要使用到 vue-cli-plugin-multi-page/plugin npm 这个插件。 使用该插件,首先需要在项目中安装它。可以通过 npm 或 yarn 来安装,具体命令如下: npm install vue-cli-plugin-multi-page/plugin 或 yarn add vue-cli-plugin-multi-page/plugin 安装完成后,就可以在 Vue CLI 创建的项目中使用该插件了。在项目根目录下的 vue.config.js 文件中,可以配置多个页面的入口和模板。 通过配置入口和模板,插件将会自动根据配置生成对应的多个页面,使开发者可以在同一个 Vue 项目中创建多个页面,并帮助管理每个页面的入口、模板以及相关的资源。 使用该插件,不仅可以方便地创建多个页面,还可以通过配置实现不同页面的路由、跳转等功能。同时,插件也支持自定义配置,可以根据项目需求进行灵活的配置和扩展。 总之,vue-cli-plugin-multi-page/plugin npm 是一个功能强大的 Vue CLI 插件,可以帮助开发者更方便地创建和管理多页面应用,同时提供了丰富的配置和扩展选项。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值