创建一个自己的Vue UI组件库，并将它发布在npm上

时间：2021-04-28 21:11:17

本文仅限于入门级，没有成规模制作，希望能对你有所帮助。

因为在开发多个项目中可能会用到同一个组件，那么我们通过复制粘贴的形式更新，无异于是笨拙的，我们可以通过上传到npm后，不断迭代npm包来实现更新。

前期准备

初始化project

这里我们使用vue-cli来初始化一个vue项目。

npm install -g @vue/cli or yarn global add @vue/cli

vue create personal-component-set

首先我们来开发一个可复用的顶栏控件，这里是用vuetifyUI库进行第二次开发。

npm install vuetify or yarn add vuetify

顶栏控件代码：

src/components/TopBar.vue

<template>

    <v-toolbar>

      <!-- 这里v开头的使用的是第三方ui组件库 -->

        <v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>

        <v-toolbar-title>{{title}}</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-toolbar-items class="hidden-sm-and-down">

            <v-btn flat @click="openMyGithub()">

                <v-avatar size=42>

                    <img src="https://avatars3.githubusercontent.com/u/10973821?s=460&v=4">

                </v-avatar>

                <span style="margin-left:8px;">About me: ssthouse</span>

            </v-btn>

            <v-tooltip bottom>

                <v-btn slot="activator" flat :href="sourceCodeLink">

                    <v-avatar size=42>

                        <img src="../assets/logo.png">

                    </v-avatar>

                    Source Code

                </v-btn>

                <span class="top-bar-tooltip">Welcome to fork & star <br/> ; )</span>

            </v-tooltip>

        </v-toolbar-items>

    </v-toolbar>

</template>

<script>

export default {

  // 接受被组件化后传递的自定义属性

  // 源代码连接

  props: ['sourceCodeLink', 'title'],

  methods: {

    openMyGithub() {

      // 自定义头像被点击的时候创建a标签并且跳转

      const a = document.createElement('a')

      a.target = '_blank'

      a.href = 'https://github.com/mufengsm'

      a.click()

    },

    toMainPage() {

      this.$emit('to-main-page')

    }

  }

}

</script>

<style scoped>

.top-bar-tooltip {

  font-size: 18px;

}

a {

  color: black;

}

</style>

配置project

下面我们配置当前项目，让它可以发布在npm上

首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component:

import Vue from 'vue'

import TopBar from './TopBar.vue'

const Components = {

  TopBar

}

Object.keys(Components).forEach(name => {

  Vue.component(name, Components[name])

})

export default Components

接下来我们添加 build 项目的脚本到 package.json 的 scripts 中:

"scripts": {

    "build-bundle": "vue-cli-service build --target lib --name personal-component-set ./src/components/index.js",

  },

命令解释：--target打包为lib仓库构建，--name项目名称为personal-component-set，入口文件为./src/components/index.js

运行命令后就可以在dist文件夹中看到打包后的文件了，这里我们选择默认发布我们的 *.common.js 文件, 所以我们在 package.json中添加main属性。

指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件。

"main": "./dist/personal-component-set.common.js",

最后, 我们再配置 package.json中的 files属性, 来配置我们想要发布到 npm 上的文件有哪些。

"files": [

   "dist/*",

   "src/*",

   "public/*",

   "*.json",

   "*.js"

 ],

npm 发布

首先去npm官网注册一个账号记得去查看邮箱邮件来认证邮箱，要不然会上传会不成功。

然后在项目中打开命令行工具npm adduser or npm login输入你注册的用户名密码和邮箱，可以使用npm whoami 查看登录状态。

在发布之前, 我们修改一下项目的名称(注意不要和npm已有项目名称冲突，可以先去npm搜索一下), 推荐使用 @你注册npm的用户名/项目名称 的命名方式。

接下来我们就可以发布我们的 UI 组件库了, 在发布之前我们再编译一次, 让build出的文件为我们最新的修改:

npm run build-bundle

我们使用下面的命令发布我们的项目:

npm publish --access public

需要注意的是 package.json中指定的version属性: 每次要更新我们的组件库都需要更新一下version(毕竟同一个version 的代码不同,很容易让人产生疑惑)

测试使用

这样我们就完成了自己的 UI 组件库的发布. 接下来我们可以在任何需要使用到该组件库的项目中使用:

npm install --save @你注册npm的用户名/项目名称

然后在index文件 (如src/main.js) 中引入该组件库:

import @你注册npm的用户名/项目名称

接下来我们就可以在 Vue的template中使用组件库中的 Component了:

<template>

  <!-- v-app是vuetify中的 -->

  <v-app id="app">

    <top-bar :sourceCodeLink="sourceCodeLink"></top-bar>

  </v-app>

</template>

如果你完全按照上面教程来的，可记得在src/main.js中引入我们文章开头的第三方ui组件库vuetify

// 使用第三方组件库

import Vuetify from 'vuetify'

import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

最后

经过上面这些步骤后, 我们就拥有了一个属于自己的组件库了. 我们可以随时更新, 发布自己新版的组件库.

而依赖了该组件库的项目只需要使用简单的 npm 命令即可更新 : )

参考文章：https://juejin.im/post/5b54120b5188251967307be4

相关文章