定义多个className时，可以将它们的class作为属性放入对象中，根据判断是否传入props参数；classBtn(){let{preCls,type,size,shape}=thisletclassName=[`${preCls}`,{[`${preCls}-${type}`]:!!type,[`${preCls}-${size}`]:!!size,[`${preCls}-${shape}`]:!!shape,},]returnclassName}props自定义验证，不遵循传入规则时，需要预先校验，校验器可以通过自定义函数校验传入的参数；type:{type:String,default:'default',//['default',success','warning','error','info']validator(value){lettypes=['default','success','warning','error','info']returntypes.includes(value)||!value}}，把组件封装在src/index.js中，这个文件是webpack配置的入口文件，install是挂载组件的方法，有了它，可以对外引用和Vue.use一个插件；进口*作为来自'./components'的组件varVuePlugin={}VuePlugin.install=function(Vue,options){for(letcomponentincomponents){Vue.component('yw'+component,components[component]);}}exportdefaultVuePlugin至此，你已经在本地成功创建了一个组件库插件，在本地main.js导入插件和css文件import'@/assets/index.scss'，从'@'导入YwVue并注册在项目中使用Vue.use(YwVue)查看自定义组件效果以下步骤将把你的插件打包发布到npm：3）修改配置项webpack.config.js：使用src中的索引作为入口文件，导出文件（yw.js）必须与pakage.json中的主要内容；入口：{style:'./src/style.js',yw:'./src/index.js',},output:{path:path.resolve(__dirname,'./dist'),publicPath:'/dist/',filename:'[name].js',library:'Yw',libraryTarget:'umd'}，通过extract-text-webpack-plugin插件将scss单独打包（yw.css）用于外部参考；{测试：/\.scss$/，使用：ExtractTextPlugin.extract({fallback:'vue-style-loader',使用：['css-loader','sass-loader']})},module.exports。plugins=(module.exports.plugins||[]).concat([newExtractTextPlugin("yw.css",{allChunks:true}),......])pakage.json:主节点被打包了可以直接引用以下快捷路径（yw-ui），无需指定相对路径（yw-ui/dist/yw.js）；开源协议许可证是“MIT”；该组件可以通过将private设置为false来公开；{"name":"ywbj-ui",//包名，npminstall****"description":"基于vue2.X的pc组件","version":"1.0.1",//每第一次上传包，版本号必须更新"author":"yourName<****@**.com>",//Enteryourinformationandemail"main":"dist/yw.js",//必须与webpack打包的导出文件名称一致"license":"MIT",//开源协议"private":false,//true表示私有，false表示public}配置完成后执行npmrunbuild生成打包文件夹dist；4）发布到npm首先在npm官网（https://www.npmjs.com/）注册一个用户；设置本地npm源为https://registry.npmjs.org/（如果是淘宝源则登录不成功）；进入项目文件夹，执行npmlogin，会要求你输入用户名、密码和邮箱；npmpublish会将打包后的文件发布到npm，成功后可以到官网搜索包名称（注意：每次发布前需要更新pakage.json中的版本号，否则会上传失败）；2.安装使用自己的插件#安装插件npminstallywbj-ui--save#引入项目importYwUIfrom'ywbj-ui'import'ywbj-ui/dist/yw.css'Vue.use(YwUI)#直接在组件中使用success3.自定义组件API文档Button按钮组件参数说明typeoptionalvaluedefaultvalueshapebuttonstringshaperoundedcorners:circle',rightangle:'rectangle'''isDisabled是否禁用按钮booleantrue/falsefalsetype按钮类型string'default',success','warning','error','info'defaultsize按钮大小string'large','medium','small'''模态对话框组件参数说明类型可选值默认值isShow是否显示booleantrue/falsefalsewidth宽度numbershowTitle是否显示标题booleantrue/falsettrueshowBody是否显示正文booleantrue/falsettrueshowFooter是否显示按钮booleantrue/falsettruesize对话框smallstring'large','medium','small''medium'4.参考效果展示