创建组件库

1、使用vue-create 创建项目

 

 

vue-create 创建的项目依赖默认放在dependencies内，手动把他放在devDependencies内。原因看下这个博客。

我曾经试过，将插件放在dependencies下。在业务引用的时候，确实报错（Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders）

 

https://blog.csdn.net/LuckyWinty/article/details/138144316

 

 

 

 

然后新建example文件夹和文件，注意文件层级。然后将src下的main.js和App.vue剪切过去。

默认项目入口是src下的main.js。和App.vue。我们这么做，是把项目启动改到example文件下。这样example变成插件本地启动的入口也就变成使用插件的样例展示了。

那就要修改vue.config.js内文件入口了，将文件指向example/main.js。

 

 pages: {

    index: {

      entry: 'example/main.js'

    }

  },

　　

 

 

 

 

然后，我们就可以在src正常开发组件了。这里我就不写了，直接使用项目自带的HelloWorld.vue组件。此时项目正常启动。插件在本地开发就结束了。接下来开始进行打包的配置

 

 

 

在src下新建一个main.js作为打包的出口.install 方法见参考vue开发插件文档

https://v2.cn.vuejs.org/v2/guide/plugins.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6

内容如下

import HelloWorld from './components/HelloWorld.vue'

const comArr = [

    HelloWorld

]

// 批量组件注册

 

/* istanbul ignore if */

const install = function (Vue) {

    if (install.installed) return

    comArr.forEach((com) => {

        Vue.component(com.name, com) // com.name的name就是你自定义封装的组件的name

    })

}

if (typeof window !== 'undefined' && window.Vue) {

    install(window.Vue)

}

export default {

    install

}

　　

 

 

 

 

 

 

 

打包配置结束，需要开始配置打包命令，

在package.json 文件下

scripts下添加命令vue-cli-service build --target lib ./src/main.js --name sd --dest lib

 

 

npm run lib执行打包

 

 

version是包的版本号，修改后版本要大于上一个，便于推送

Private 删除。

Main 是包入口，在打包文件夹下可以看出是lib/sd.umd.js

Keywords 包搜索关键词

Author 作者

Description 描述词

Files 暴露文件（指插件被安装后，依赖包显示内容。）

 

 

接着本地测试包，打开main.js

引入并挂载到VUE上

 

 

删除App.vue 内的引入HelloWorld组件代码

 

 

 

重新执行启动命令。可以看看到页面和引入HelloWorld.vue效果一样。说明插件开发成功

以上是单个组件插件，有的时候一个插件包可能包含多个组件，且可以按需引入。

将上面HelloWorld.vue 改成index.vue，并放入新创建的HelloWorld文件夹中。在HelloWorld文件夹下新建一个index.js

Index.js内容

import index from './index.vue'

index.install = function (Vue) {

  Vue.component(index.name, index)

}

// 默认导出方式导出

export default index

　　

 

 

剩下的就是推送到npm 了