教程:基于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也可以)


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

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

3、运行。

  (1)在终端输入:cd my-app
  (2)在终端输入:yarn serve

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

二、搭建私有化 Npm 库

1、安装verdaccio

  在终端输入: npm install -g verdaccio

2、运行

  在终端输入: verdaccio

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

三、上传组件库

1、修改vue项目的包结构

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

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

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。
教程:基于Verdaccio搭建一个私有化 Npm 库, 并上传本地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

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

四、测试组件库

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组件库

上一篇:What can I hold you with


下一篇:先记录一些我脑子里已经记住的英语口语