开发Vue组件并上传到npm

一、使用场景

例：公司多个项目导航相同，为避免导航改版造成多项目重复修改，需将导航封装成组件，放到npm上进行管理并使用。

二、组件封装步骤

1、创建Vue项目

使用vue-cli创建vue基础项目

vue create own-test-lib

选择Vue2默认项目配置

2、修改目录结构

将src目录修改为examples，用于依赖库的本地测试。
在根目录下新建packages目录，用于存放开发的组件。
目录结构如下图：

3、处理目录修改后项目无法运行的问题

目录结构修改后会造成项目无法运行，需要做如下修改：
1）、修改vue.config.js文件，更改入口配置

module.exports = {
	// 将入口 src 替换为 examples
	pages: {
		index: {
			entry: 'examples/main.js,
			template: 'public/index.html',
			filename: 'index.html'
		}
	}
}

2）、修改vue.config.js，增加对package目录的处理

module.exports = {
	// 扩展 webpack 配置，对 packages 进行编译
	chainWebpack: config => {
        config.module
        .rule('js')
        .include
            .add(__dirname + 'packages')
            .end()
        .use('babel')
            .loader('babel-loader')
            .tap(options => {
            // 修改它的选项...
            return options
        })
    }
}

vue.config.js最终配置：

module.exports = {
    // 修改 src 目录 为 examples 目录
    pages: {
      index: {
        entry: 'examples/main.js',
        template: 'public/index.html',
        filename: 'index.html'
      }
    },
    // 强制内联CSS
    css: { extract: false },
    // 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: config => {
        config.module
        .rule('js')
        .include
            .add(__dirname + 'packages')
            .end()
        .use('babel')
            .loader('babel-loader')
            .tap(options => {
            // 修改它的选项...
            return options
        })
    }
  }

4、创建组件结构

1）、在 package 目录下，组件以文件夹形式存在，新建 test-lib/ 目录
2）、在 test-lib/ 目录下新建 src/ 目录用于存储组件代码
3）、在 test-lib/ 目录下创建 index.js 文件对外提供组件的引用
目录结构如下：

4）、修改 /packages/test-lib/index.js 文件，对外提供引用

import testLib from './src/test-lib.vue'
testLib.install = function (Vue) {
	Vue.component(testLib.name, testLib)
}

export default testLib

5）、修改 /packages/index.js 文件，整合所有组件，导出

import testLib from './test-lib'

// 存储组件列表
const components = {
	testLib
}

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
	// 判断是否安装
	if (install.installed) return
	// 遍历注册全局组件
	components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
	install(window.Vue)
}

export default {
	// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
	install,
	testLib
}

三、组件使用示例

1、在 /examples/main.js 中导入组件

import Vue from 'vue'
import App from './App.vue'

// 导入组件库
import testLib from './../packages/index'
// 注册组件库
Vue.use(testLib)

Vue.config.productionTip = false

new Vue({
	render: h => h(App)
}).$mount('#app')

2、在 /examples/App.vue 中使用组件

<template>
	<testLib />
</template>

四、发布到 npm 的步骤

1、修改 package.json 文件

新建一条构建依赖包的命令

• –target：构建目标，默认为应用模式。这里修改为 lib 启用库模式
• –dest：输出目录，默认 dist
• [entry]：最后一个参数为入口文件，默认为 src/App.vue

"scripts": {
	"lib": "vue-cli-service build --target lib --name testlib --dest lib packages/index.js"
}

执行该命令

npm run lib

2、配置 package.json

• name:包名，该名字是唯一的。可在 npm 官网搜索名字，如果已存在则需要更改名字。
• version：版本号，每次发布到 npm 需要修改版本号，不能和历史版本号相同。
• description：描述。
• main：入口文件，该字段需指向我们最终编译后的包文件。
• keyword：关键字，以空格分离希望用户最终搜索的词。
• author：作者。
• private：是否私有，需要改为 false 才能发布到 npm
• license：开源协议。

{
  "name": "testlib",
  "version": "0.0.1",
  "description": "用于测试的依赖包组件",
  "main": "lib/testlib.umd.min.js",
  "keyword": "testlib test-lib testLib",
  "private": false
 }

3、添加 .npmignore 文件，设置忽略的发布文件

只有编译后的 lib 目录、package.json、README.md 才是需要被发布的。因此需要设置忽略的目录和文件。
例：

# 忽略目录
examples/
packages/
public/

# 忽略指定的文件
vue.config.js
babel.config.js
*.map

4、登陆到 npm

终端执行登陆命令，输入用户名、密码、邮箱登陆到 npm

npm login

5、发布到 npm

npm publish