创建组件库流程:
1、首先注册一个npm用户,执行以下命令(按照流程输入用户名密码和邮箱):
npm adduser
注册成功后登录,执行命令
npm login
2、初始化vue组件项目:
vue create my_component
3、创建项目成功后,进入src/components,新建index.js,将组件挂载在vue上,使用Vue.use引入
import Vue from "vue";
import Input from "./input/index.vue";
const Components = {
Input
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
并新建组件,如btn.vue
5、打包项目(在发布之前,请保证是最新代码):
npm run build-bundle
6、发布代码到npm上,发布成功可进入官网个人中心查看
npm publish --access public
7、安装测试:
npm install --save @username/component-name
8、更新npm包,进入组件库代码目录下
(1)、本地更新版本号
比如我想来个1.0.1版本,注意,是最后一位修改了增1,那么命令
:npm version patch 回车就可以了;
比如我想来个1.1.0版本,注意,是第二位修改了增1,那么命令
:npm version minor 回车就可以了;
比如我想来个2.0.0版本,注意,是第一位修改了增1,那么命令
:npm version major 回车就可以了;
( 2)、修改远端的版本,提交到远端npm中:
npm publish
tips:发布成功后会收到官网邮件
9、组件库的引用(同引入element类似),在main.js中引入
import xwjbtn from ‘@xiewenjing/xwjbtn’; //组件名称
Vue.use(xwjbtn);
协同流程
1、在项目中安装:
npm install --save 包名
2、在项目中使用
直接在main.js中引入,同时引入css文件
import zhjy from 'zhjy_ui':
import 'zhjy_ui/dist/zhjy_ui.css';
Vue.use(zhjy);
3、更新组件库
(1)编写新组件,
(2)编写好README.md说明文档
(3)更新版本信息
a.重新打包
npm run build-bundle
b.本地更新版本号
比如我想来个1.0.1版本,注意,是最后一位修改了增1,那么命令
npm version patch
比如我想来个1.1.0版本,注意,是第二位修改了增1,那么命令
npm version minor
比如我想来个2.0.0版本,注意,是第一位修改了增1,那么命令
npm version major
c.修改远端的版本,提交到远端npm中:
npm publish
4、在使用组件库项目中更新npm包
npm update 包名
个人组件库地址:https://www.npmjs.com/package/zhjy_ui