作为前端工程师在开发时很多时候我们不需要自己造轮子，直接使用现有的组件库。但是也可能有某些特殊情况，我们希望有自定义的ui组件。这里我用vue做一个基础的button组件并发布到npm，接着尝试使用这个ui组件。
前置准备
⭐vue-cli3
⭐npm账号密码（npm官方地址）
创建项目
🔵执行vue create button-ui
🔵手动选择功能模块Manually select features
🟢代码风格--》 ESLint + Standard config
🟢格式检测--》 Lint on Save
🟢配置文件生成方式--》 In package.json
🟢是否保存预配置--》否
创建目录结构
🟣在根目录中创建一个packages目录用来存放我们要开发的UI组件；
🟣在根目录创建一个local目录,用于测试引用我们自己开发的UI组件的效果。
🟣由于我们更改了原项目的目录结构，使得系统本地运行以及打包找不到对应的目录，我们需要在项目的根目录中创建一个vue.config.js文件夹手动的去修改webpack配置，使得系统本地运行和打包正常。
\
制作组件
①在packages文件夹内新建两个文件夹button，fonts和一个index.js文件。 编辑packages/index.js
②button文件夹内新建index.js用于导出组件\
③编辑packages/button/src/button.vue
④然后新建src文件夹，放button组件这就是个普通的vue文件，后续会持续加入一些属性来完善这个组件。
🌼button type
常见的类型有：primary / success / warning / danger / info / text
我们采用动态类型绑定的数组形式
🌼添加圆角
运行项目
本地跑起来，看看效果。完善之前的local文件夹内容，新增App.vue，man.js，TestButton.vue三个文件。App.vue从testButton中引入了McButton组件并展示main.js是入口文件。在引入了packages的组件库后，TestButton.vue可以直接使用mc-button。 在执行npm run serve之后打开页面可以看到外面自定义的组件在项目内是可以正常使用了。
打包
本地登陆 npm 账号并发布。
注意点：
-
🔴上传到npm上时，要将package.json中的private属性修改为false
-
🔴包迭代时，要修改package.json里的版本号，再执行发布命令
验证 npm 包
- 当发布好项目之后，重新建一个
vue项目 - 在运行
npm install之后还需要再安装一个我们自己的npm包, 运行npm install 包名称 -S npm包安装完毕之后，在main.js中新增包引用
问题总结
原因：组件export导出时没有name值啊
✅解决方法：添加name组件名称
💠———————————————————————————————————————💠
💠———————————————————————————————————————💠
💠———————————————————————————————————————💠
原因：scss-loader 版本太高
✅解决方法：卸载安装低版本即可
原因：Eslint报错
✅解决方法：vue.config.js中添加lintOnSave:false
