用vue封装插件并发布到npm的方法步骤
发布时间:2020-12-17 02:45:47 所属栏目:百科 来源:网络整理
导读:一、基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号。 1.1 初始化组件 用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按
一、基于vue的国家区号列表vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号。
1.1 初始化组件用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来。 1.2 根据自己的需求,实现具体功能,我的主要功能写在vue-flag-list.vue组件中。功能写好后,修改package.json等配置文件,为打包发布做准备 1.3 添加index.jsconst VueFlagList = {
install: function (Vue) { if (typeof window !== 'undefined' && window.Vue) { Vue = window.Vue } Vue.component('VueFlagList',flagComponent) } } export default VueFlagList 1.4 修改配置文件1.4.1 package.json1.4.2 .gitignore 文件因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。 1.4.3 webpack.prod.conf.js 文件为了支持多种使用场景,我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD,CMD只能在 Node 环境执行,AMD 只能在浏览器端执行,UMD 同时支持两种执行环境。显而易见,我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget,其支持的格式有:
以下是 webpack.prod.conf.js 中 output 设置的示例: Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue,打包的时候,不应该将 Vue 打包进组件库。但是,如果你将打包后的组件库以 相关内容
|