vue-npm-package

打包命令

npm run lib

打包完成后，会生成以下文件

dist/demo.html
dist/组件库名字.common.js       --> 打包器用的commonJS包
dist/组件库名字.common.js.map
dist/组件库名字.css             --> 组件中分离出的css，组件没有css这个文件不会出现
dist/组件库名字.umd.js          --> 给浏览器或AMD loader使用的umd包
dist/组件库名字.umd.js.map
dist/组件库名字.umd.min.js      --> 压缩后的umd包
dist/组件库名字.umd.min.js.map

手动按需引入组件

上传package中未压缩的原组件到npm
请把根目录下.gitignore文件过滤器中的 package/ 删除，
package文件夹将在npm publish中上传

package/

上传npm

npm publish

上传npm时，上传的文件有

dist/组件库名字.common.js
dist/组件库名字.css
dist/组件库名字.umd.js
dist/组件库名字.umd.min.js
package.json
README.md

不需要上传的文件可以在.gitignore文件过滤器中配置

配置文件

package.json

"name":"组件库名字",
"main": "dist/组件库名字.common.js"
"scripts": {
    "lib": "vue-cli-service build --target lib --name 组件库名字 -dest lib package/组件库的index文件.js",
}

vue.config.js

文件中的配置已加上注释，没有特殊需求这个文件不用改动

.gitignore

在文件过滤器中加入以下配置，禁止不需要的文件上传到npm组件库中

# Editor directories and files
src/
public/
vue.config.js
babel.config.js

组件引用

全局引入

import cmpPackage from 'cmp-package'
import 'cmp-package/dist/cmp-package.css'
Vue.use(cmpPackage)

按需引入(方法一)(可用，但待验证)

未验证这是不是按需，但可以这样用没问题。。

import cmpPackage from 'cmp-package'
import 'cmp-package/dist/cmp-package.css'
Vue.use(cmpPackage.ComponentName)

按需引入(方法二)

需要把完整的package上传到npm

import Component from 'cmp-package/package/component/component'
components:{ Component }

Customize configuration

See Configuration Reference.