前言
因为公司几个项目都使用了相同的公共组件，为了提高开发效率和便于维护，我们决定写一个公共的UI组件库。为了使用方便，我们将它发布到NPM上。
1、NPM 介绍
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
(1)允许用户从NPM服务器下载别人编写的第三方包到本地使用。
(2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
(3)允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
2、创建组件库项目
1. 使用vue-cli4创建vue项目
vue create user-defined-components
具体的创建过程参考https://cli.vuejs.org/zh/guide/
如果执行语句报错：nrm : 无法加载文件 C:\Users\11190\AppData\Roaming\npm\nrm.ps1，因为在此系统上禁止运行脚本。
可参考https://zhuanlan.zhihu.com/p/493496089
2. 修改原始项目结构
将src文件目录名称改为examples，里面的所有子文件不修改，这个用于验证和演示组件效果；
新建packages文件目录，里面将会添加自定义的所有组件；
项目默认启动src里面的服务，所以修改了原目录，就要手动添加vue.config.js文件
module.exports ={
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html',
},
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: (config) =>{
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader');
},
};
3. 结构介绍
packages/Button/src/index.vue就是组件代码，下面的index.js就是当前组件的安装文件,注意一定要定义组件名称
<template>
<div class="x-button">
<slot></slot>
</div>
</template>
<script>
export default{
name: 'x-button',
props: {
type: String
}
}
</script>
<style scoped>
.x-button{
display: inline-block;
padding: 3px 6px;
background: #000;
color: #fff;
}
</style>
// 导入组件，组件必须声明 name
index.js内容：
importXButton from './src'
// 为组件提供 install 安装方法，供按需引入
XButton.install = function(Vue) {
Vue.component(XButton.name, XButton)
}
// 导出组件
export defaultXButton
接下来我们在packages的入口文件中导入组件并安装导出（packages/index.js）：
// 导入button组件
importXButton from './Button'
// 组件列表
constcomponents =[
XButton
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function(Vue) {
// 判断是否安装
if(install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if(typeofwindow !== 'undefined' &&window.Vue) {
install(window.Vue)
}
export default{
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
XButton
}
3、使用自定义组件
修改项目目录后，项目的入口文件就是examples下的main.js，所以要全局引用自定义组件库，就要使用Vue.use( plugin )，具体代码如下：
importVue from 'vue'
importApp from './App.vue'
importxui from '../packages';
// 全局注册引用自定义组件
Vue.use(xui);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
例子中使用自定义组件（不需要单独引入）
<template>
<div id="app">
<x-button type="primary">button</x-button>
</div>
</template>
<script>
export default{
name: 'App',
}
</script>
4、发布自定义组件库到NPM
1. 在packages.json中配置打包打包的build脚本，目的就是将我们的自定义组件的代码打包放到指定目录下
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name zjui --dest lib packages/index.js"
},
lib脚本就是用来打包packages的组件代码到lib目录下,文件名为以--name指定的名称前缀开头,我们执行脚本会输出类似如下代码:
2. 需要编写package文件的description,keywords等,具体介绍如下:
description 组件库的描述文本
keywords 组件库的关键词
license 许可协议
repository 组件库关联的git仓库地址
homepage 组件库展示的首页地址
main 组件库的主入口地址(在使用组件时引入的地址)
private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库
files 被项目包含的文件名数组（如果这里不填的话，就需要添加 .npmignore 配置文件，.npmignore配置文件类似于 .gitignore 文件，如果没有 .npmignore，会使用.gitignore来取代他的功能）
//packages.json 配置文件的具体内容：
{
"name": "chenyuwangzi-defined-components",
"version": "0.1.3",
"private": false,
"description": "自定义组件库",
"author": "夏莉",
"keywords": [
"UserDefinedComponentsUI",
"userDefinedComponentsui",
"Vue组件"
],
"main": "lib/zjui.common.js",
"homepage": "https://github.com/jz991724/user-defined-components#readme",
"repository": {
"url": "https://github.com/jz991724/user-defined-components"
},
"files": [
"lib",
"packages"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name zjui --dest lib packages/index.js"
},
...
}
3. 上传到NPM
1. 检查自己是否使用了其他npm镜像。(如果是，请切换回官方npm源。否则可能会出现权限不足的问题)
//由其他源切回npm源
npm config set registry=http://registry.npmjs.org
如果有问题参考：https://zhuanlan.zhihu.com/p/422765596?utm_id=0
2. 在 npm 注册账号（自己百度教程）
3. 在项目根文件夹执行 npm login 按提示输入用户名，密码，email
4. 执行 npm publish 进行上传
5. 如果想撤回版本 npm unpublish 包名[@版本]
npm unpublish zhangjun-defined-components@0.0.2
结果
NPM官网登录自己注册的账号，查看自己成功上传的组件库
网友评论