前端如何搭建vue UI组件库/封装插件(从零到有)

需求

因之前是做外包项目居多，经常用到相同的组件，之前的办法是在一个项目中写一个组件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以，自己研究准备去封装一个组件库，

 

前言

日常在项目中我们经常直接根据 npm install/ npm i 去安装插件/组件库

例如: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组件

<template>
  <div class="about">
    <input :type="typeInput" @change="inputChange" />
  </div>
</template>

<script>
export default {
  props: {
    typeInput: String
  },
  methods: {
    inputChange(val) {
      this.$emit("change", val);
    }
  }
};
</script>

 

3.新建components/index.js

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;

 

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

1.官网注册
  https://www.npmjs.com/signup
2.命令行注册
  npm add user   //按照提示输入用户名,邮箱等即可
3.注册后登陆
  npm login    //按照提示输入用户名,密码,邮箱等即可
4.登陆后查看登陆状态(可忽略)
  npm whoami

 

 

6.打包项目(在发布之前，请保证是最新代码)

npm run build-bundle

 

 

7.发布代码到npm上

npm publish --access public

 

 

8.登陆npm官网查看发布代码(UI组件库创建完成)

个人头像->profile settings->package

 

 

9.测试组件（新建/已有项目中安装）

1.安装
  npm install --save @username/component-name    //@npm官网注册username/组件项目名 == @username/component-name

2.引用在项目总入口中(找到src/index.js)文件
  import '@username/component-name'

3.引用在页面中
  <template>
   <input :typeInput="type" @change="changeInput"/>
  </template>
  <script>
   export default {
      data() {
        return {
           typeInput: 'text'
       }
    },
    methods: {
       changeInput(val) {
         console.log(val)
       },
    }
   }
  </script>

 

总结

根据以上步骤操作下来，期间遇到过一些问题，列举一下，希望可以帮助到大家也方便自己用

packjson.json文件
  1."name": "@username/项目名" //username需要使用npm官网注册的username，我一开始是随便用了一个名字去提交代码，一直报错，查了很多资料才发现username的原因
　
 2."private": false,  //private需要设置为false，否则报错

   

 

 

查询资料

https://blog.csdn.net/baidu_25464429/article/details/81153798

如上述还有不懂的地方可以查看以上网址，本人是根据该网址步骤依次发布的

如还有需要改进的地方，请您不吝赐教