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

如上述還有不懂的地方可以查看以上網址，本人是根據該網址步驟依次發布的

如還有需要改進的地方，請您不吝賜教