封装vue组件发布到npm

347 阅读1分钟

1、在scr文件先建package目录
2、在package目录下新建需要封装vue组件文件夹
3、书写vue组件,完成后,在package中新建index.js文件

 // index.js文件
 import LczButton from './lcz-button'
 import LczInput from './lcz-input'
 const components = [
  LczButton,
  LczInput
]
const install = (Vue) => {
  for (const component of components) {
    Vue.component(component.name, component)
  }
 }
export default install

4、package.json打包配置

// package.json配置
"package": "vue-cli-service build --target lib ./src/package/index.js --name lcz-ui --dest lcz-ui"
// 打包命令解释
--target lib 关键字 指定打包的目录
--name 打包后的文件名字
--dest 打包后的文件夹的名称

5、执行打包命令 npm run package

6、进入打包后的文件,初始化一个package.json文件,进入lcz-ui 执行 npm init -y

7、发布到npm仓库

npm config set registry=https://registry.npmjs.org // 设置npm源
npm adduser // 添加npm用户
npm publish // 发布到npm
```