vue-cli打包npm组件关键点记录

首先创建项目

vue create 项目名（vue init 是老版本）

然后把目录整理成如下

examples是为了本地测试
packages里面存放开发的组件

然后整理package.json

在npm命令行有了入口文件就不用再在vue.config.js上定义入口文件了

附上vue.config.js配置方案

vue cli官网描述构建库

注意点：css需要合并一起打包的话，需要在vue.config.js增加配置：
css: { extract: false },

packages/index.js内容

// 导入封装的组件
import fontChange from './components/font-change'
import Mt1 from './components/mt1'

const components = [Mt1,fontChange]

const install = function (Vue) {
  // 遍历注册所有的组件
  components.map(com=>{
    Vue.component(com.name,com)
  })
}

// 注意这里的判断，很重要
if(typeof windwo !== 'undefined' && window.Vue) {
  install(window.Vue)
}

// 导出组件库
export default {
  install,
  // 组件列表
  ...components,
}

注意点：组件代码必须定义name,以供index.js 调用

npm发布

npm login 先登录

设置好版本号之后就可以 npm publish

如果登陆了仍然报错： You must sign up for private packages npm

这个当你的包名为@your-name/your-package时才会出现，原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布:

npm publish --access public

新项目引用

npm add @xxx/packages --save

更新版本
npm update @xxx/packages

在main.js里

import xxx from '@xxx/packages'
Vue.use(xxx)