VUE开发--NPM组件开发
一、封装npm包
1. 使用vue-cli 创建一个 基础项目。
vue create huoniu8-scratch
2.调整目录
我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行创建。
src\examples 用作示例展示
src\packages 用于编写存放组件
3.项目配置
注：cli3 提供一个可选的 vue.config.js 配置文件。
// vue.config.js
module.exports = {
pages: {
index: {
// page 的入口， 一定要改为组件的文件
entry: 'src/packages/index.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
}
vue-cli 3.x 提供了构建库的命令，所以这里不需要再为 packages 目录配置 webpack。
4.编写组件
添加文件：
src\packages\textarea\main.vue
<template>
<!-- 组件的标签就是组件内定义的的 name -->
<textarea rows="5" cols="5">自定义组件,进行npm组件测试</textarea>
</template>
<script>
export default {
name: "HnTextarea"
};
</script>
<style>
</style>
需要注意的是，组件必须声明 name，这个 name 就是组件的标签
src\packages\textarea\index.js
// 导入组件，组件必须声明 name
import Textarea from './main.vue'
// 为组件添加 install 方法，用于按需引入
Textarea.install = function (Vue) {
Vue.component(Textarea.name, Textarea)
}
export default Textarea
5. 整合并导出组件
编辑 packages/index.js 文件，实现组件的全局注册:
src\packages\index.js
// 导入单个组件
import HNTextarea from './textarea/index'
// 以数组的结构保存组件，便于遍历
const components = [
HNTextarea
]
// 定义 install 方法
const install = function (Vue) {
if (install.installed) return
install.installed = true
// 遍历并注册全局组件
components.map(component => {
Vue.component(component.name, component)
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具备一个 install 方法
install,
// 组件列表
...components
}
6. 组件测试
src\main.js
import HNTextarea from './packages/index'
Vue.use(HNTextarea)
7. 引入组件
<template>
<div id="app">
<hn-textarea name="HNTextarea"/>
</div>
</template>
显示结果
二、打包组件
vue-cli 3.x 提供了一个库文件打包命令：
文档：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93
主要需要四个参数：
- target: 默认为构建应用，改为 lib 即可启用构建库模式
- name: 输出文件名
- dest: 输出目录，默认为 dist，这里我们改为** lib**
-
entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js
在 package.json 里的 scripts 添加一个 lib 命令：
package-lock.json
"scripts": {
"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib src/packages/index.js",
},
执行:
npm run lib
命令，编译组件。
编译组件
三. 发布
1. 需要在 package.json 添加组件信息
name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
keyword：关键字，以空格分割；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。
{
"name": "hn-textarea",
"version": "0.1.0",
"description": "hn组件测试",
"main": "lib/hn-textarea.umd.min.js",
"author":"marquis",
"keyword": "textarea hn-textarea",
"private": false,
"license":"MIT",
}
2. 然后创建 .npmignore 文件，设置忽略文件：
该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件：
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
3. 发布到 npm
如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来:
# 查看镜像地址
npm config get registry
# 设置镜像地址
npm config set registry http://registry.npmjs.org
如果没有 npm 账户，可以通过 npm adduser 命令创建一个账户。
或者到 npm 官网：https://www.npmjs.com/注册
如果在官网注册的账户，或者以前就有账户，就使用 :npm login
huoniu8-scratch> npm login
Username: xxxxxxxx
Password:
Email: (this IS public) xxxxxxx@qq.com
Logged in as marquis888 on http://registry.npmjs.org/.
命令登录
在发布之前，一定要确保组件已经编译完毕，而且 package.json 中的入口文件（main）的路径正确:
发布组件：
npm publish
发布成功
四、安装组件测试
1. 安装
npm install hn-textarea -d
查看依赖：
查看依赖
2. 测试
src\main.js
import HnTextarea from 'hn-textarea'
Vue.use(HnTextarea)
使用：
<hn-textarea name="HNTextarea"/>
3. 发布撤销
取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为。
根据规范，只有在发包的24小时内才允许撤销发布的包。
即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了（即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了）。
npm deprecate -f 'hn-textarea@0.1.2' 'test'
npm WARN using --force I sure hope you know what you are doing.
五、常见问题：
1. WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
组件定义的name与标签不对应。
2. npm ERR! 403 Forbidden you must verify your email before publishing a new package
注册完成后，必须在邮箱进行认证。
认证
