从零构建一个Vue UI组件库(三)——发布第一个npm包

3,343 阅读1分钟

先看下效果ninecat-ui

组件库源码ninecat-ui(如果觉得还不错,可以给个start哦)

从零构建一个Vue UI组件库(二)——编写第一个组件中我们已构建一个最简单的组件,然后可以供外部使用了。现在我们需要把我们的UI组件库发布到npm,通过用npm的方式安装依赖和使用组件。

上一节中我们已经将项目打包了,并获得了一个package文件夹,但是这还不能满足通过安装npm包的方式来使用这个组件库。下面我们来一步步实现。

本地打包测试

修改package.json文件的入口文件

"main": "package/ninecatui.js",

然后npm pack就可以打出一个ninecatui-1.0.0.tgz的文件。

这个文件是可以通过npm安装的,为了测试,我们可以直接在当前项目测试一下。

在用npm安装之前需要改一下package.json的name,不然会在安装的时候冲突,我们将

"name": "ninecatui"

改成

"name":"ninecatui-test"

直接yarn add ./ninecatui-1.0.0.tgz或者npm install ./ninecatui-1.0.0.tgz

之所以要加./是因为本地安装是以路径为参数。

如果出现如上效果,恭喜你本地安装成功了,下面我们来改一下引用,看看应用是否可以正常使用。

修改src/index.js

import Vue from 'vue'
import App from './index.vue'
// 修改引用
import Ninecatui from 'ninecatui'

Vue.use(Ninecatui)

new Vue({
  render: h => h(App)
}).$mount('#app')

真好,可以正常使用,说明本地打包是可以正常使用的。下面我们来将它发布到npm。

发布至npm

先在npm官网注册一个账号。

在项目根目录下,登录npm账号,输入用户名、密码、邮箱。

npm login

出现如上信息就说明你登录成功了。

然后执行npm publish即可

上图,ninecatui-test就是我们的包。

验证测试npm包

我们用vue-cli创建一个vue项目,然后通过npm来安装引入。

直接

vue create hello-world

然后

yarn add ninecatui-test

直接修改一下src/main.jssrc/App.vue

src/main.js

import Vue from 'vue'
import App from './App.vue'
import Ninecatui from 'ninecatui-test'

Vue.use(Ninecatui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Hello 
      :name="name"
    />
  </div>
</template>

<script>

export default {
  name: 'App',
  data:function(){
    return {
      name:'Ninecat UI'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

恭喜你,第一个npm包发布成功。npm发布成功了至少踏出了一小步,后面还要不断优化,将项目工程化。

源码在ninecat-ui

--------持续更新中,未完待续-------