创建与发布

新增组件

文件路径: src/components/Hello/Hello.vue

<template>
  <div>
    <h1>hello</h1>
  </div>
</template>

<script>
  export default {
    // 必须要有name,不然会报莫名其妙的错误
    name: 'Hello'
  }
</script>

导出组件插件

文件路径: src/components/Hello/index.js

import Hello from "./Hello.vue"
Hello.install = Vue => Vue.component(Hello.name, Hello);
export default Hello;

把封装的多个组件导出一个模块

文件路径: src/index.js

import Hello from "./components/Hello";
import xxx from "./components/xxx";

export {
  Hello,
  xxx
}

定义一个ts模块,到时候引用时不报ts模块警告

文件路径: src/index.d.ts

// 和 package.json -> name 一致
declare module 'syy-ui';

修改package.json

/*
 * private: 设置为 false
 * main: 表示入口文件
 * types: 设置ts模块入口文件
 * files: 上传到npm服务器必备文件
*/
{
  "name": "syy-ui",
  "version": "0.1.0",
  "description": "组件库",
  "private": false,
  "main": "./src/index.js",
  "types": "./src/index.d.ts",
  "files": [
    "src/components/*",
    "src/index.js",
    "src/index.d.ts"
  ],
}

发布npm包

• 访问 www.npmjs.com 注册一个账号
• 回到vue工程的终端窗口

  // 需要切换到原npm镜像,不能使用taobao镜像之类的
  npm login // 登录
  npm who am i // 确认登录
  // 每次发布都得改版本(package.json -> version),不能跟历史版本重复
  npm publish // 发布
  

使用该组件库

安装

npm i syy-ui -S

在入口文件按需引入

import { Hello, xxx } from "syy-ui"
Vue.use(Hello)
Vue.use(xxx)

在页面中使用

<template>
  <div>
    <Hello />
  </div>
</template>

来源

• 炙热的心跳: vue自定义组件库发布npm