vue-cli3/vue-cli4搭建组件库,发布到npm

一、创建项目        

在指定目录中使用命令创建一个项目,或者使用vue可视化面板一键生成。

vue create/vue ui(建议使用vue可视化面板生成)

 

 

二、 调整目录

  1、把src目录更名examples,用做示例展示

  2、新增packages 用于编写存放组件

  调整后目录结构

 

三、 重新配置项目以支持新的目录结构

在根目录下新建一个vue.config.js文件,重新配置页面入口、添加webpack对packages目录支持处理,代码示例

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          return options
        })
  }
}

四、编写组件

 在packages目录下新建toast目录和index.js文件,toast目录下再建index.js和index.vue 

 

 toast目录下的index.js导出当前组件,代码示例

import toast from './index.vue'
 
toast.install = function (Vue) {
  Vue.component(toast.name, toast)
}

export default toast

packages目录的index.js整合所有的组件,对外导出,即一个完整的组件库代码示例

import toast from './toast'
 
// 存储组件列表
const components = [
    toast
]
 
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}
 
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
 
export default {
  // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  toast
}

五、 测试用例

修改examples目录下app.vue,修改后的代码示例

<template>
  <div id="app">
    <toast />
  </div>
</template>
<script>
import toast from "./../packages/index";
import Vue from "vue";
 Vue.use(toast);

export default {
  name: "App",
};
</script>

修改完运行看到效果图说明组件已经没问题可以发布了

 

六、准备发布到npm

1、package.json 中新增一条编译为库的命令

"lib": "vue-cli-service build --target lib --name  zdy-com --dest lib src/lib/index.js"

2、配置 package.json 文件中发布到 npm 的字段

  • name: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。
  • version: 版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。
  • description: 描述。
  • main: 入口文件,该字段需指向我们最终编译后的包文件。
  • keyword:关键字,以空格分离希望用户最终搜索的词。
  • author:作者
  • private:是否私有,需要修改为 false 才能发布到 npm
  • license: 开源协议

 

3、添加 .npmignore 文件,设置忽略发布文件

我们发布到 npm 中,只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

和 .gitignore 的语法一样,具体需要提交什么文件,看各自的实际情况。

 

七、发布到npm

 申请一个npm账号,cmd进入该项目的目录,npm run lib 后 npm publish


        

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值