教程：基于Verdaccio搭建一个私有化 Npm 库, 并上传本地Vue组件库_verdaccio 可以上传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 = {
    // 修改 入口文件夹为 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)
    }
  }
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

import baseInput from './src/baseInput.vue'

baseInput.install = function(Vue) {
    Vue.component(baseInput.name, baseInput)
}
export default baseInput
1
2
3
4
5
6

----> /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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、测试组件

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

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

   （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
  ...
}
1
2
3
4
5
6
7

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)
1
2
3
4

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