教程:基于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 = {
// 修改 入口文件夹为 pages
pages: {
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)
启动项目。出现输入框。成功!