需求
因之前是做外包项目居多，经常用到相同的组件，之前的办法是在一个项目中写一个组件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以，自己研究准备去封装一个组件库，
前言
日常在项目中我们经常直接根据 npm install/ npm i 去安装插件/组件库
1例如:npm i element-ui -S, npm install vux --save
内容
1.vue项目安装(如已安装，可略过此步骤)
全局安装webpack
npm install webpack -g 或者 npm install -g webpack
安装vue-cli
npm install --global vue-cli //vue-cli2
# OR
npm install -g @vue/cli //vue-cli3
# OR
yarn global add @vue/cli //vue-cli3
2.新建组件
在项目中找到src/components下新建input.vue组件 export default {
props: {
typeInput: String
},
methods: {
inputChange(val) {
this.$emit("change", val);
}
}
};
3.新建components/index.js
import Vuefrom"vue";
import Input from"./input/index.vue";constComponents = {
Input
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export defaultComponents;
4.修改package.json(蓝色是修改，绿色是备注，粉色是提示)
如项目名为commpent-name
{
"name": "@username/commpent-name(此处备注项目名)",//username需要是npm官网中申请的username
"version":"0.1.0",//每次更新库需要修改版本号，以免覆盖影响到其他项目
"private": false,//需要设置为私有"main": "./dist/component-library-gao.common.js",//指定该属性后，当引用组件库时，会默认加载main中指定的文件"files": [//引用组件库可以访问的文件"dist/*", "src/*", "public/*", "*.json", "*.js" ],"scripts": {
"serve":"vue-cli-service serve",
"build":"vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib--name commpent-name(此处备注项目名)./src/components/index.js",//根据组件路径直接打包项目中的组件，将此发布到npm上，"lint":"vue-cli-service lint",
"test:e2e":"vue-cli-service test:e2e",
"test:unit":"vue-cli-service test:unit" },
}
5.注册npm
https://www.npmjs.com/signup2.命令行注册
npm add user //按照提示输入用户名,邮箱等即可3.注册后登陆
npm login //按照提示输入用户名,密码,邮箱等即可4.登陆后查看登陆状态(可忽略)
npm whoami
6.打包项目(在发布之前，请保证是最新代码)
npm run build-bundle
7.发布代码到npm上
npm publish --accesspublic
8.登陆npm官网查看发布代码(UI组件库创建完成)
个人头像->profile settings->package
9.测试组件（新建/已有项目中安装）
1.安装
npm install --save @username/component-name//@npm官网注册username/组件项目名 == @username/component-name2.引用在项目总入口中(找到src/index.js)文件
import '@username/component-name'3.引用在页面中
data() {
return {
typeInput: 'text' }
},
methods: {
changeInput(val) {
console.log(val)
},
}
}
总结
根据以上步骤操作下来，期间遇到过一些问题，列举一下，希望可以帮助到大家也方便自己用
packjson.json文件
1."name": "@username/项目名" //username需要使用npm官网注册的username，我一开始是随便用了一个名字去提交代码，一直报错，查了很多资料才发现username的原因
2.
"private": false, //private需要设置为false，否则报错
查询资料
https://blog.csdn.net/baidu_25464429/article/details/81153798
如上述还有不懂的地方可以查看以上网址，本人是根据该网址步骤依次发布的