1. 创建vue项目(我选择的是2.x的版本)
1-1 使用命令行创建vue
npm install @vue/cli -g
vue create '项目名'
1-2 改变vue脚手架内容
1-2-1 将原src目录更名为examples
1-2-2 新建packages目录
1-2-3 新建vue.config.js文件
2. 创建组件
2-1 在package目录下新建一个组件,目录格式如下:
package
——组件名文件夹
—— src
—— index.vue
index.vue内容如下:
<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>
—— index.js
index.js内容如下:
// 导入组件,组件必须声明 name
import XButton from './src/index.vue'
// 为组件提供 install 安装方法,供按需引入
XButton.install = function(Vue) {
Vue.component(XButton.name, XButton)
}
// 导出组件
export default XButton
3. 配置package.json文件
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
}
4. 需要编写package文件的description,keywords等,具体介绍如下:
-
description 组件库的描述文本
-
keywords 组件库的关键词
-
license 许可协议
-
repository 组件库关联的git仓库地址
-
homepage 组件库展示的首页地址
-
main 组件库的主入口地址(在使用组件时引入的地址)
-
private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
-
publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库
5.发布到npm
// 本地编译组件库代码
npm run lib
// 登录
npm login
// 发布
npm publish
// 如果发布失败提示权限问题,请执行以下命令
npm publish --access public
6. 发布之后在下载使用时
import vui from '@alex_xu/vui'
import '/@alex_xu/vui/lib/vui.css'
Vue.use(vui)