建立, 发布本身的 Vue UI 组件库

建立, 发布本身的 Vue UI 组件库

前言

在使用 Vue 进行平常开发时, 咱们常常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等.

只需一行命令, 便可方便的将这些库引入咱们当前的项目:

npm install vuetify
// or
yarn add vuetify

可是当咱们本身开发了一个 _UI Component_, 须要在多个项目中使用的时候呢? 咱们首先想到的多是直接复制一份过去对吗?

这样作是很方便, 可是有两个问题:

• 当该 component 须要更新时, 咱们须要手动维护全部用到该 component 的更新
• 当有多个 component 须要共享时, 手动复制过于繁琐

那么, 咱们为何不发布一个 UI 组件库给本身用呢?

本文笔者将介绍如何一步步, 建立并发布本身的 Vue UI 组件库.

初始化 project

这里咱们使用官方的 vue-cli 初始化一个 Vue 项目

npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create personal-component-set

进入咱们新建的项目, 让咱们看看当前的项目文件:

接下来让咱们写一个简单的 _Vue component_. 这里我写了一个简单的顶栏控件, 用来展现: 页面标题, 个人我的信息, github 源码连接等信息.

代码以下:

<template>
    <v-toolbar>
        <v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
        <v-toolbar-title>Visual Explain</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="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.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'],
  methods: {
    openMyGithub() {
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = 'https://github.com/ssthouse'
      a.click()
    },
    toMainPage() {
      this.$emit('to-main-page')
    }
  }
}
</script>

<style scoped>
.top-bar-tooltip {
  font-size: 18px;
}

a {
  color: black;
}
</style>

以上代码构成了一个很是简单的 Vue component_, 提供了一个 _props: sourceCodeLink 方便定制化跳转连接, 提供了一个 _event: to-main-page_, 用于触发用户跳转回主页的回调.

效果如图:

配置 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 中:

其中 --name libraryName 指定的是要发布的Library的名称, 咱们执行上面新加的脚本:

能够看到 build 生成了各类版本能够用于发布的js文件

这里咱们选择默认发布咱们的 *.common.js 文件, 因此咱们在 package.json中添加main属性.

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

最后, 咱们再配置 package.json中的 files属性, 来配置咱们想要发布到 npm 上的文件路径.

咱们这里将用户引用咱们的组件库可能用到的全部文件都放进来:

npm 发布

首先咱们注册一个 npm 帐号 (若是已有帐号, 能够跳过此步骤)

npm add user

// 按照提示输入用户名, 邮箱等便可

而后使用 npm login 登陆注册号的状态

登陆后可使用 npm whoami 查看登陆状态

在发布以前, 咱们修改一下项目的名称(注意不要和已有项目名称冲突), 推荐使用 @username/projectName 的命名方式.

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

npm run build-bundle

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

npm publish --access public

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

测试使用

这样咱们就完成了本身的 UI 组件库的发布. 接下来咱们能够在任何须要使用到该组件库的项目中使用:

npm install --save @ssthouse/personal-component-set

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

import '@ssthouse/personal-component-set'

接下来咱们就能够在 Vue的template中使用组件库中的 Component了:

<template>
  <v-app id="app">
    <top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
    <router-view/>
  </v-app>
</template>

最后

通过上面这些步骤后, 咱们就拥有了一个属于本身的组件库了. 咱们能够随时更新, 发布本身新版的组件库.

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

对数据可视化和 D3.js 感兴趣 ?

这里是个人 D3.js 、 数据可视化 的 github 地址, 欢迎 start & fork

D3-blog

你也能够在这里找到我 : )

github 主页

知乎专栏

掘金

想直接联系我 ?

邮箱: ssthouse@163.com

微信: