目前市场上有各种UI组件库，比如Element、iView，实力毋庸置疑。但是我们面临着越来越复杂的需求。当它们不再能满足我们的需求时，就需要开发一套属于我们自己团队的组件库。

因此，本文的目的是使读者能够制作一个简单的插件供人们使用，并构建和维护一个组件库。

下面这个简单的颜色选择器插件vColorPicker讲述了从开发到上线再到npm的过程。

VColorPicker插件DEMO

一.技术堆栈

如何通过新版本的脚手架创建一个项目，这里就不提了。自己看官方文件。

新支架的库模式Vue-cli3:允许我们轻松创建和打包库npm:组件库将存储在npm webpack中：修改配置需要一点webapck的知识。二.概述

如果我们想要构建一个组件库，我们必须首先有一个大概的想法。

规划目录结构配置项目，支持目录结构编写组件编写样例配置使用库模式打包编译发布到npm III。规划目录结构

1.创建项目

使用指定目录中的命令创建默认项目，或根据自己的需要选择它。

$ vue创建。

2.调整目录

我们需要一个目录存储组件，一个目录存储示例，并按照以下方式转换目录。

.|-示例//原始src目录，更改为示例示例演示|-包//添加了用于编写存储组件的包.

第四，配置项目以支持新的目录结构

在上一步的目录转换之后，我们会遇到两个问题。

src目录被重命名为示例，这使得项目无法运行新添加的packages目录，该目录没有添加到webpack编译中注意：cli3提供了一个可选的vue.config.js配置文件。如果此文件存在，它将被自动加载，并且项目和webpack的所有配置都在此文件中。

1.重新配置门户并修改配置中的页面选项

新的Vue CLI支持使用vue.config.js中的pages选项构建多页应用程序.

使用页面将条目修改为这里的示例

module.exports={//将src目录修改为示例目录页： { index 3360 { entry : ' examples/main . js '，template3360' public/index.html '，Filename: ' index.html ' } } }。支持包目录的处理，并修改配置中的chainWebpack选项

Packages是一个新的目录，默认情况下webpack不处理这个目录，所以需要为这个目录添加配置支持。

ChainWebpack是一个接收基于webpack-chain的ChainableConfig实例的函数。支持对内部webpack配置进行更细粒度的修改。

module.exports={//将src修改为示例页面： { index : { entry : ' examples/main . js '，模板：' public/index.html '，Filename: 'index.html'} }，//扩展webpack配置。添加包以编译链web pack : config={ config . module . rule(' js ')。include.add ('packages ')。end()。使用(' babel ')。loader ('babel-loader ')。点击(选项={//修改其选项.

网络包链

动词（verb的缩写）书写组件

上面，我们已经配置了对新目录架构的支持，然后我们尝试编写组件。让我们以发布到npm的一个小插件为例。

GitHub-颜色选择器：vcolorpicker

1.创建新组件

在packages目录下，所有单独的组件都以文件夹的形式存储，因此在这里创建一个目录。在颜色选择器/目录下创建src/目录来存储组件源代码。在/color-picker目录下创建index.js文件，以提供对组件的外部引用。

修改文件/包/颜色选择器/index.js以提供对外部世界的引用。

#/packages/color-picker/index . js//导入组件，这些组件必须声明名称import color picker from '。/src/color-picker . vue//提供组件的安装方法。用于导入颜色选择器=函数(vue){ vue.component(color picker . name，color picker)}//导出默认colorPicker2。集成所有组件并将其导出到外部，即一个完整的组件库

修改/packages/index.js文件以导出整个组件库。

//导入颜色选择器组件从“”导入颜色选择器。/color-picker//store components list const components=[color picker]//定义安装方法并接收Vue作为参数。如果注册一个插件使用，那么所有的组件都会注册const install=function (Vue) {//判断是否安装if (install.installed) return //遍历注册的全局组件components.map (component=vue。组件(组件。name，component))}//判断是否直接导入文件if (typeof window！==' undefined ' window . vue){ install(window . vue)} export default {//导出的对象必须有install，才能由Vue.use()方法安装。//以下是具体的组件列表colorPicker} VI。写一个例子

1.导入示例中的组件库

从“vue”导入vue，从“导入应用程序”。/app . vue//import组件库从导入颜色选择器。/./packages/index//register组件库vue . use(color picker)vue . config . production tip=false new vue({ render :h=h(app)})。$ mount ('# app') 2。在示例中使用组件库中的组件

在上一步向Vue.use()进行全局注册后，可以直接在任何页面上使用，无需介绍。当然，也可以根据需要引入。

模板color picker v-model=' color ' v-: change=' headlechangegcolor '/color picker/templatescript export default { data(){ return { color : ' # ff 0000 ' } } }，methods : { headlechangegcolor(){ console . log(' color change ')} } }/script VII。发布到npm，以便在项目中直接参考

到目前为止，我们已经开发了一个完整的组件库，然后将其发布到npm供以后使用。

1.在package.js中添加编译到库中的命令

在库模式下，Vue是外部的，这意味着即使将Vue引入到代码中，打包的文件也不包含Vue。

Vue Cli3构建目标：库

下面，我们在脚本中添加一个新命令npm run lib

-target:构建目标，默认情况下是应用程序模式。在此修改以启用lib的库模式。-dest:输出目录，默认dist。在这里，我们将其更改为lib [entry] :最后一个参数是入口文件，默认值是src/App.vue这里我们指定编译包/组件库目录。脚本“: {//.”lib ' : ' vue-CLI-service build-targetlib-name vcolorepicker-destlibpackages/index . js ' }执行编译库命令

$ npm运行库

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

namversiondescriptionmainkeywordpauthorprivatelinse

以下是参考设置

{'name' :' vcolorepicker '，' version' :' 0.1.5 '，' description' : '基于Vue的颜色选择器'，' main ' : ' lib/vcolorepicker . UMD . min . js '，Keyword' :' vcolorepicker颜色选择器颜色选择器'，' private' : false} 3。添加。npmignore文件并设置为忽略已发布的文件

当我们发布到npm时，只需要发布编译后的lib目录、package.json和README.md。所以我们需要设置忽略目录和文件。

就像。gitignore，需要提交什么文件取决于他们的实际情况。

#忽略目录示例/包/公共/#忽略指定的文件vue . config . jsbabel . config . js * . map 4 .登录npm

首先，您需要在npm注册一个帐户，注册过程很简单。

如果配置了淘宝镜像，请先将其设置回npm镜像：

$ NPM配置集注册表http://registry.npmjs.org然后在终端执行登录命令，并输入用户名、密码和电子邮件地址登录。

$ npm登录

5.发布到npm

执行发布命令将组件发布到npm

$ npm发布

6.出版很成功

发布成功后等几分钟，可以在npm官网搜索。以下是刚刚提交的vcolorpicker

摘要

以上是边肖引入的Vue cli3库模式，构建组件库发布到npm，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！