Vue组件库开发总结由于工作需要，目前正在学习如何开发一个Vue组件库。需要实现以下几点：1.使用npm包导入组件2.实现按需导入和按需打包项目中很多实现参考element-ui，特别是webpack打包部分来组织项目工程生成工程生成直接使用vue-cli，在根目录下添加一个index.js作为组件打包的入口文件，两个webpack打包文件，以及一个组件json文件，用于后续按需导入打包。组件放在src/cmps下，目录结构如下：组件结构由于我的组件把所有的样式都写在vue里，所以没有单独的样式文件，只有一个vue文件和一个js入口文件Components写一个组件写vue组件的编写需要遵循官方的Vue插件开发规范。为了实现后续的按需打包，在每个组件的入口文件中，需要定义install方法并随组件importButtonfrom'./index.vue'Button.intall=function(vue){看。component(Button.name,Button)}exportdefaultButton所有组件输出写所有组件的输出就是暴露所有组件，并为所有组件添加一个install方法。其中if(window&&window.Vue)install(window.Vue)用于实现script标签引入的方法。从'src/cmps/input/index.js'导入输入从'src/cmps/toast/index.js'导入Toast从'src/cmps/button/index.js'导入按钮constcmps=[Input,Toast,Button]constinstall=vue=>{cmps.map(cmp=>{vue.component(cmp.name,cmp)})}if(window&&window.Vue)install(window.Vue)exportdefault{安装,Input,Toast,Button}组件打包完全加载打包首先将vue-cli生成的webpack文件改为打包后的入口出口文件和路径。为了方便后续按需加载打包，我导出文件的路径放在了lib目录下。为了实现npm包、script标签等导入形式，libraryTarget选择了umd模式。library是npm包导入时的名称。该条目是我编写的，用于测试该组件是否可以在本地使用dev。externals是去掉组件库和实际项目中的重复库，比如vueentry:ENV=='dev'?path.resolve(__dirname,'./src/main.js'):path.resolve(__dirname,'./index.js'),输出:{path:path.resolve(__dirname,'./lib'),publicPath:'/dist/',文件名:'input-ui.js',library:'input-ui',libraryExport:'default',libraryTarget:'umd'},externals:{vue:'vue'}package.json需要添加主入口“main”的描述：“lib/input-ui.js”按需加载打包按需加载打包主要是指element-ui的代码。每个组件都需要单独打包，所有组件都需要完整打包。其实我不明白这里的fullpackage和上面说的volumeloadingfullpackage的区别。似乎libraryTarget是不同的。在element-ui中，全包主入口文件的libraryTarget是commonjs2，而点播包中主入口文件的libraryTarget是umd。这里的libraryTarget是随便写的，因为我其实并不需要使用script标签导入方式。按需打包就是把所有的组件单独打包，和全包的区别只是入口和出口的区别。constentry=require('./comps.json')module.exports={entry,output:{path:path.resolve(__dirname,'./lib'),publicPath:'/dist/',文件名:'[name].js',chunkFilename:'[id].js',libraryTarget:'commonjs2'},comps.json{"input":"./src/cmps/input","toast":"./src/cmps/toast","button":"./src/cmps/button"}使用按需打包需要按需打包。不仅组件库的打包需要处理，工程也需要处理。通过以上方式打包的组件库，可以在项目中使用babel-plugin-component实现按需打包。在.babelrc中添加这个组件。libraryName是需要按需打包的库的名称。由于在我的简单组件中没有引用单独的样式，因此样式设置为false。否则在引用组件时需要获取样式文件。前面说了，为了方便按需打包，打包后的目录为lib。这是因为babel-plugin-component默认的库目录是lib。如果需要修改目录，只需要添加“libDir”：“lib”，具体的babel-plugin-component可以在官方readme中使用。"plugins":[["component",{"libraryName":"input-ui","style":false}]]然后就可以使用按需导入的方式在项目中使用组件import{Input,Button}from'input-ui'Vue.component(Input.name,Input)Vue.component(Button.name,Button)npmpackagelocaltest在发布npm包之前，我们需要在本地测试包是否达到了我们的预期影响。此时，我们可以使用npmlink将我们需要测试的包链接到本地??的npm全局。然后在本地测试项目中，通过npm链接本地测试的包名将我们要测试的本地包导入到测试项目中，就可以对我们只做的组件库的npm包进行本地测试了。发布npm包，首先需要在npm官网注册一个账号。npmjs.com然后添加用户npmadduser填写账号密码和邮箱。只需通过npmpublish发布包即可。如果遇到报错说你没有发布包的权限，基本上是因为包名被使用了。只需将其更改为另一个名称即可。而且每次发布包都需要修改版本号，不能发布两个相同的版本号。最后，这是我第一次写文章，水平有限。本人对webpack打包了解不多，所以写的有点乱，甚至可能会有些错误。请及时指出，谢谢。gitHub
