教程：基于Verdaccio搭建一个私有化 Npm 库, 并上传本地Vue组件库

本文主要是介绍教程：基于Verdaccio搭建一个私有化 Npm 库, 并上传本地Vue组件库，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

教程：基于Verdaccio搭建一个私有化 Npm 库, 并上传本地Vue组件库

开发环境：
1、Node.js (v12.18.3)
2、Vue CLI (v4.5.12)
3、Verdaccio (v4.12.0)

一、创建Vue项目

可以自行使用vue CLI （3.x以上）或其他IDE来创建新的vue 3项目。

1、安装vue cli。

  使用命令行安装: npm install -g @vue/cli

   （注意：先把npm的源设置为淘宝源）

2、创建vue项目。

  （1）使用vscode打开一个空的文件夹。

  （2）在终端输入：vue create my-app 。

     选择默认 vue2 并敲击回车（vue 3也可以）

3、运行。

  （1）在终端输入：cd my-app
  （2）在终端输入：yarn serve

二、搭建私有化 Npm 库

1、安装verdaccio

  在终端输入： npm install -g verdaccio

2、运行

  在终端输入： verdaccio

三、上传组件库

1、修改vue项目的包结构

   将src文件夹重命名为examples（存放测试用例）.
   在项目根目录下新建packages（存放组件库代码）

2、修改vue.config.js文件

   在项目根目录下新建一个vue.config.js文件，内容如下：

// vue.config.js
const path = require('path')
function resolve (dir) {return path.join(__dirname, dir)
}module.exports = {// 修改 入口文件夹为 pagespages: {index: {entry: 'examples/main.js',template: 'public/index.html',filename: 'index.html'}},chainWebpack: config => {// 设置文件夹别名config.resolve.alias.set('@', resolve('./examples'))  // 注意路径不能为 __dirname + './example'这种形式.set('~', resolve('./packages'))// 设置编译规则config.module.rule('js').include.add(resolve('./packages')).end().use('babel').loader('babel-loader').tap(option => option)}}

3、组件库示例代码

   （1）在 /packages 下创建：baseInput文件夹、index.js。
   （2）在 /packages/baseInput 下创建：src文件夹、index.js。
   （3）在 /packages/baseInput/src 下创建：baseInput.vue。

  （4）代码如下：
----> /packages/baseInput/src/baseInput.vue

<template><div>baseInput: <input v-model="msg"/></div>
</template>
<script>
export default {name: 'baseInput',data () {return {msg: 'i am a component.'}}
}
</script>

----> /packages/baseInput/index.js

import baseInput from './src/baseInput.vue'baseInput.install = function(Vue) {Vue.component(baseInput.name, baseInput)
}
export default baseInput

----> /packages/index.js

import baseInput from './baseInput'const install = function (Vue) {if (install.installed) return// 注册组件Vue.use(baseInput)install.installed = true
}export default {install,baseInput
}

4、测试组件

   （1）在/examples/main.js文件中注册组件：

// /example/main.js
import baseInput from '~'
Vue.use(baseInput)

   （2）在/examples/App.vue文件中使用组件：<baseInput></baseInput>。
      启动项目，如果页面出现输入框，则表示组件使用正常。

5、修改package.json

   version 改为 0.1.1
   private 改为 true
   main 设置为 packages/index.js（这是外界引入的入口）

{"name": "my-app","version": "0.1.1",			// 版本号改为: '0.1.1'"private": false,				// 改为 false"main": "packages/index.js",	// 外界引入文件入口设为 packages/index.js...
}

6、上传到私有npm库

   （1）终端输入：npm adduser --registry http://localhost:4873

   按照提示输入完毕。

   （2）终端输入：npm publish --registry http://localhost:4873

四、测试组件库

1、yarn安装

   终端输入：yarn add my-app --registry http://localhost:4873

2、测试组件

   修改example/main.js文件：

// example/main.js
// - import baseInput from '~'
+ import baseInput from 'my-app'
Vue.use(baseInput)

   启动项目。出现输入框。成功！

这篇关于教程：基于Verdaccio搭建一个私有化 Npm 库, 并上传本地Vue组件库的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---