本文主要是介绍教程：基于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组件库的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
