自定义ui组件库 发布npm 安装

自定义组件

index.js

// 导入组件文件
import WxxButton from './components/WxxButton.vue';
import WxxSwiper from './components/WxxSwiper.vue';

// 放置到数组当中
const components = [WxxButton,WxxSwiper]

export default {
	install: (app, options) => {
		components.forEach(item => {
			// 循环导入组件
			app.component(item.name, item);
		})
	}
};

WxxButton.vue

<template>
	<button>自定义按钮</button>
</template>

<script>
/**
 * @Description: file content
 * @Autor: wxx
 * @Date: ${DATE}
 */
export default {
	name: 'WxxButton'
}
</script>

<style scoped lang="less"></style>

WxxSwiper.vue

<template>
	<div>自定义轮播组件</div>
</template>

<script>
/**
 * @Description: file content
 * @Autor: wxx
 * @Date: ${DATE}
 */
export default {
	name: 'WxxSwiper'
}
</script>

<style scoped lang="less"></style>

package.json

{
  "name": "npmuimyself",
  "version": "0.0.3",
  "description": "ui库描述",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "前端",
    "ui框架"
  ],
  "author": "wxx",
  "license": "ISC"
}

npm 发版步骤

1. 在项目跟目录下通过 npm init 或 yarn init 生成package.json文件

2. 在官网注册npm账号：https://www.npmjs.com/

3. 登录到官网进行邮箱验证

   • npm 国外服务器 可能需要翻墙

4. npm login

5. npm publish

• 推送 npm publish --access public 以公共的发布，谁都可以下载，私有的话需要费用，名称前面加@符号

需要注意项：版本号相同、名称前 @符号 代表是私有的、包名不能有斜杠等特殊字符