// 导入颜色选择器组件 import colorPicker from './color-picker' // 存储组件列表 const components = [ colorPicker ] // 定义 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, // 以下是具体的组件列表 colorPicker }
六、编写示例
1、在示例中导入组件库
import Vue from 'vue' import App from './App.vue' // 导入组件库 import ColorPicker from './../packages/index' // 注册组件库 Vue.use(ColorPicker) Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app')
2、在示例中使用组件库中的组件
在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。
<template> <colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker> </template> <script> export default { data () { return { color: '#ff0000' } }, methods: { headleChangeColor () { console.log('颜色改变') } } } </script>
七、发布到 npm，方便直接在项目中引用
到此为止我们一个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使用。
1、 package.js 中新增一条编译为库的命令
在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。
以下我们在 scripts 中新增一条命令 npm run lib
--target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
--dest : 输出目录，默认 dist 。这里我们改成 lib
[entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。
"script": { // ... "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js" }
执行编译库命令
$ npm run lib
2、配置 package.json 文件中发布到 npm 的字段
name
version
description
main
keyword
author
private
license
以下为参考设置
{ "name": "vcolorpicker", "version": "0.1.5", "description": "基于 Vue 的颜色选择器", "main": "lib/vcolorpicker.umd.min.js", "keyword": "vcolorpicker colorpicker color-picker", "private": false }
3、添加 .npmignore 文件，设置忽略发布文件
我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。
# 忽略目录 examples/ packages/ public/ # 忽略指定文件 vue.config.js babel.config.js *.map
4、登录到 npm
首先需要到 npm 上注册一个账号，注册过程略。
如果配置了淘宝镜像，先设置回npm镜像：
$ npm config set registry
然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。
$ npm login
5、发布到 npm
执行发布命令，发布组件到 npm
$ npm publish
6、发布成功
发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker
总结
以上所述是小编给大家介绍的Vue cli3 库模式搭建组件库并发布到 npm，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: