关于vue.js:vuecli打包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)