先看下效果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.js
和src/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
--------持续更新中,未完待续-------