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

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


认证

你可能感兴趣的:(VUE开发--NPM组件开发)