vue插件开发流程及问题

1. 流程介绍
   
   
2. 插件制作
   开发工具：vsCode，npm6.14.4， webpack5.0.0  这些都不重要。。。。。
   1.1.  Vue组件开发
   

   1． 新建项目建议使用vue init webpack-simple projectname，为什么呢?因为这样建立的项目webpack只需要关注webpack.config.js这个配置文件，当然大佬随意，不过大佬也不会看我这博客。。。。
   

   2 . 新建好项目后就进行正常的vue组件开发就好了，在此我制作的是ui插件，所以我的项目是没有使用router和vuex的，eslint也没用
   
   

   1.1.  插件打包
   
   

   我使用的webpack打包工具，如果对webpack工具不了解的小伙伴可以去官网了解一下。我简单说一下我的理解：webpack就是通过项目中的引用（import  * from XXX），把需要的引用找来，
   然后就是代码压缩，所以需要一个入口（就是webpack开始从这个文件找其中引用的文件），出口就是打包的方式和文件存放的位置。
   
   

   那么问题来了，vue入口文件的代码如何设置呢？有没有特定格式呢？当然有
   
   

   就是vue提供了插件加载的方式，如上图给js对象属性install装载函数，到时候通过Vue.Use方法使用。

   就是这么简单  vue 就打包好了。

   问题：因为我制作的ui组件是在element-ui基础上封装了一层的，然后其中引用的elment的css和js包，打包的时候报错，把对应的import删除即可，后续使用自制插件的项目引用elementui即可。（为什么报错，在下懒得去找了，找到的小伙伴可以告诉我）

   2.3.  本地包测试

   打包好的包需要进行本地测试，这就有一个坑爹问题了。
   

   先说一下在下的操作吧，打包完成后我直接将打好的包复制到src文件中，然后通过import方式引用
   

    

    

   然后就出现了上面的问题，所以呢？

   但是但是但是我把插件推送到npm上面，然后下载引用则没有这个问题。

    

   我找不到问题啊！然后就找找，然后就找到了这篇博客https://juejin.cn/post/6844903826592366600  强烈建议给作者点赞！

   简单点解释就是node_modules中的文件进行加载的时候中间都会通过 label进行转换成es6 中 import的模式，具体的可以去了解 umd，amd，cmd，commonjs等，
   因为我们使用的webpack打包的是umd的模式，所以我们需要插件转码一下就行。

   解决办法：

   babel.config.js文件中添加

   plugins: ["@babel/plugin-transform-modules-umd"]
   
   

    

    

   如果你的项目中中没有babel.config.js文件，建议通过脚手架新建一个项目进行测试，因为我不想去找对应的配置文件。

   命令   vue create projecttestname,然后插件手动选择一个label就行了，建议不要选eslint，就选了之后项目运行一直卡在40%。测试完成后就可以上传npm了。

    

   补充：我如果没有使用使用npm的框架呢，就是引用vue.js包进行开发，那么需要去网上找对应的 umd 加载的js插件，列如 sea.js .require.js

   或者直接插件入口中：
   
   

   其实就是把 Vue.Use()这个方法提前了。

   然后直接
   

    

    

   就行了！

    

   2.4 Npm发布

   网上很多博客，自己找找

   本人非专业前端，博客写的垃圾请轻喷！