雅荷心语博客今天准备把我的一些常用组件发布到npm包里, 但是找了一圈资料都是特别繁琐的教程, 于是简单的研究了一下;
关于如何注册 https://www.npmjs.com/ 就不 多说了, 主要说说发布的事情;
首先看看 vue 的文档, 快速启动一个vue 服务;
https://cli.vuejs.org/zh/guide/prototyping.html#vue-serve
其实大概意思就是, 本地新建一个 xxx.vue, 然后直接把这个文件启动起来
比如我在本地新建一个 app.vue
app.vue 里面写正常 vue组件的内容
|
1 2 3 4 5 |
<template> <div class="app"> helo 天明 </div> </template> |
然后启动起来
|
1 |
vue serve app.vue |
打开浏览器顺利看到内容, 如果这是我的一个组件的话, 那我再把组件导出,
为什么要走上面这几步呢, 是为了调试组件, 如果你很厉害, 组件不需要调试, 可以直接从下面开始~~~
根目录新建一个 index.js
导出组件, 类似于
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * Created by PhpStorm. * User: iyahe@qq.com (天明) * Date: 2020/4/5 * Time: 21:58 * Description: */ module.exports = { toAdd: require("./components/toAdd"), tabar: require('./components/taBar'), swiper: require('./components/swiper') } |
然后呢, 修改package.json 里面的 “private”:false,
大概是因为私有的npm不让发布;
其实这样, 我们就可以发布了,
发布流程和网上大家发的一样! 具体就不细写了
比如 npm login
然后
|
1 |
npm publish --access public |
发布成功之后, 我们怎么使用呢?
|
1 |
import {toAdd} from '@tianmin/uniapp-modules' |
这样就行了, 和使用本地组件一样!
这是我发布的一个测试组件: https://www.npmjs.com/package/@tianmin/uniapp-modules
这样看下来, 发布一个组件其实很简单!
