前端如何搭建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

.官网注册

  https://www.npmjs.com/signup

.命令行注册

  npm add user   //按照提示输入用户名,邮箱等即可

.注册后登陆

  npm login    //按照提示输入用户名,密码,邮箱等即可

.登陆后查看登陆状态(可忽略)

  npm whoami

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

npm run build-bundle

7.发布代码到npm上

npm publish --access public

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

个人头像->profile settings->package

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

.安装

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

.引用在项目总入口中(找到src/index.js)文件

  import '@username/component-name'

.引用在页面中

  <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

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

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

巴特西

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

最新文章

热门文章