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

需要注意的是，组件必须声明 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. 引入组件

显示结果

二、打包组件

vue-cli 3.x 提供了一个库文件打包命令：
文档：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93
主要需要四个参数：

1. target: 默认为构建应用，改为 lib 即可启用构建库模式
2. name: 输出文件名
3. dest: 输出目录，默认为 dist，这里我们改为** lib**
4. 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) [email protected]
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)

使用：

3. 发布撤销

取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为。
根据规范，只有在发包的24小时内才允许撤销发布的包。
即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了（即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了）。

npm deprecate -f '[email protected]' '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

注册完成后，必须在邮箱进行认证。

认证