npm发布封装的公共组件

原创已于 2023-06-20 17:22:49 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#npm #vue.js #javascript

于 2023-02-02 16:09:07 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何新建Vue项目，修改项目文件夹结构，设置vue.config.js以适应组件化需求。接着讲解了编写和导出组件，整合所有组件，并在项目中测试组件的流程。然后，详细说明了如何打包组件，修改package.json配置，以及创建.npmignore文件。最后，文章阐述了如何发布组件到npm及安装已发布的包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.新建vue项目

　项目目录结构如下:

二.修改项目文件夹

1.创建一个packages文件夹(用于存放编写的组件)

2.把src修改为examples

3.新建一个vue.config.js文件,并修改

由于修改了src文件夹,启动vue项目后,找不到入口(main.js)会报错,所以需要重新指定启动入口

module.exports = {
  // 将 examples 目录添加为新的页面  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

4.目录结构

三.编写组件

结构和代码分析

1、htBarRace***是一个文件夹,下面有***src/index.vue***和***index.js
2、***index.vue***是组件
export default {
    name:"htBarRace", //注意:组件必须声明 name，这个 name 就是引用组件时的标签
    .....
3、 ***index.js***是组件导出文件
import bar from './src/index.vue'
// 为组件添加 install 方法，用于按需引入
bar.install = function (Vue) {
    Vue.component(bar.name, bar)
}
export default bar

2.整合所有组件,修改packages下的index.js

// 导入组件
import lineSimple from "./htLineSimple/index.js"; // 折线图
import radarAqi from "./htRadarAqi/index.js"; // 雷达图
import simpleGauge from "./htSimpleGauge/index.js"; // 仪表盘

import {sortNumber} from './utils'  // 需要导出的方法

// 存储组件列表
const components = [lineSimple,radarAqi];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  });
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  ...components,
   sortNumber 
}

四.测试组件是否正常

1.在需要的地方引入组件

import htBarRace from '~/htBarRace'

components: { htBarRace },

2.在页面上使用组件(标签名就是之前定义的组件的name)

五.打包组件

修改package.json文件

在script中加上一句话, 
“lib”: “vue-cli-service build --target lib --name chartComponent --dest lib packages/index.js”

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint",

"lib": "vue-cli-service build --target lib --name young-form --dest lib packages/index.js"

}

主要需要四个参数：

target: 默认为构建应用，改为 lib 即可启用构建库模式

name: 输出文件名

dest: 输出目录，默认为 dist，这里我们改为 lib

entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

2.执行命令,编译组件 npm run lib会生成一个 lib文件夹　　

六.修改一系列配置

1.修改 package.json

"name": "chart-component",

"version": "1.0.8",

"description": "这是一个动态组件",

"main": "lib/chartComponent.umd.min.js",

"keyword":"",

"private": false,

"license": "MIT",

"author": "test",

......

name: 包名，该名不能和已有的名称冲突

version: 版本号，不能和历史版本号相同

description: 简介

main: 入口文件，应指向编译后的包文件

**keyword：**关键字，以空格分割

**author：**作者

**private：**是否私有，需要修改为 false 才能发布到 npm

**license：**开源协议

2.创建发布忽略文件.npmignore

.DS_Store

node_modules/

examples/

packages/

public/

vue.config.js

babel.config.js

*.map

*.html

# 本地开发文件

.env.local

.env.*.local

# 日志文件

npm-debug.log*

yarn-debug.log*

yarn-error.log*

# 编辑器文件

.idea

.vscode

*.suo

*.ntvs*

*.njsproj

*.sln

*.sw*

七.发布组件到npm

1.执行命令修改npm源

　npm config set registry http://registry.npmjs.org

2.npm login登录你的npm账号(如果没有,可以去npm官网注册一个)

3.发布组件

npm publish

八安装npm发布出去的包

npm install chart-component

index.js
import myChart from 'chart-component'
Vue.prototype.$myChart=myChart

component
<lineSimple></lineSimple>
this.$myChart.sortNumber()