vue封装公共组件库并发布到npm库详细教程

vue组件封装的原理:利用vue框架提供的api: Vue.use( plugin ),我们需要把封装好组件的项目打包成vue库,并提供install方法,然后发布到npm中。Vue.use( plugin )的时候会自动执行插件中的install方法。
在这里插入图片描述

一、组件库代码目录

目录调整:参考element-ui

  1. 根目录创建 packages文件夹 – 用于存放所有的组件

  2. 把src改成examples – 用于进行代码测试

  3. 把fonts字符图标文件也放到packages中

  4. 新增vue.config.js配置
    在这里插入图片描述
    在这里插入图片描述

二、配置文件

1. vue.config.js配置

// vue.config.js配置
const path = require('path')
module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js', // 因为我们改了src目录,所以对应的入口文件配置也要做修改
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置,使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

2. packages / index.js 配置

// 统一导出 // 导入颜色选择器组件 
import Button from './button' 
import Dialog from './dialog' 
import Input from './input' 
import Checkbox from './checkbox' 
import Radio from './radio' 
import RadioGroup from './radio-group' 
import Switch from './switch' 
import CheckboxGroup from './checkbox-group' 
import Form from './form' 
import FormItem from './form-item' import './fonts/font.scss'

// 存储组件列表 
const components = [ Button, Dialog, Input, Checkbox, Radio, RadioGroup, Switch, CheckboxGroup, Form, FormItem ]

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

// 判断是否是直接引入文件,如果是,就不用调用 Vue.use() 
if (typeof window !== 'undefined' && window.Vue) { 
	install(window.Vue)
}

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

三、将组件库打包成vue插件

使用vue cli提供的api,将组件库打包成vue库:官网文档
在这里插入图片描述
我们可以在package.json中增加一条打包命令,将代码打包成vue库:“lib”: "vue-cli-service build --target lib packages/index.js’;
执行命令后,dist目录就已经是vue库
在这里插入图片描述

四、发布到npm库

1. 修改package.json 文件

"private": false,  // 私有属性要改成 false
"main": "dist/xinwei-ui.umd.min.js",  // 指定main属性,作为入口文件,dist目录下的 .umd.min.js文件
"author": {
  "name": "李四"
},

2. 增加 .npmignore文件,指定忽略文件不被npm管理

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

3. 发布到npm库

  1. npm config get registry ---- 检查npm源是不是:https://registry.npmjs.org/,大多数人都改成了淘宝镜像,需要改回来
  2. npm login — 登录npm,没有账号需要注册
  3. npm publish — 发布npm库

发布成功后,过一会可以在官网查看发布的库:https://www.npmjs.com/

其他项目就可以用过npm去安装 封装的组件库,使用方法跟element-ui类似,在main.js中引入

import XinweiUI from 'xinwei-ui'
import 'xinwei-ui/dist/xinwei-ui.css'

Vue.use(XinweiUI);

组件库源码地址: https://github.com/zanjing007/xinwei-ui

  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 创建一个Vue组件 首先,需要创建一个Vue组件,并编写组件代码。可以使用Vue CLI来快速创建一个Vue项目: ``` vue create my-component-library ``` 在创建项目时,需要选择手动选择特性,并勾选Babel、Router、Vuex和CSS Pre-processors等选项,以便后续使用。 然后,在src目录下创建components目录,并编写组件代码。例如,创建一个HelloWorld组件: ```vue <template> <div>{{ message }}</div> </template> <script> export default { name: 'HelloWorld', props: { message: String } } </script> ``` 2. 配置打包命令 完成组件编写后,可以使用vue-cli-service进行打包。在package.json文件中添加以下命令: ```json "scripts": { "build": "vue-cli-service build --target lib --name my-component-library src/main.js" } ``` 其中,--target lib表示打包为一个,--name my-component-library表示的名称为my-component-library,src/main.js表示入口文件。 3. 配置package.json 在package.json文件中,需要添加以下配置: ```json { "name": "my-component-library", "version": "1.0.0", "description": "A Vue.js component library", "main": "dist/my-component-library.umd.js", "files": [ "dist/*", "src/components/*" ], "keywords": [ "vue", "component", "library" ], "author": "Your Name", "license": "MIT", "peerDependencies": { "vue": "^2.6.11" } } ``` 其中,name、description、keywords、author、license等字段需要根据实际情况进行修改。main字段指定了的入口文件,files字段指定了需要发布的文件列表,peerDependencies字段指定了依赖的Vue版本。 4. 发布npmnpm官网注册并登录账号后,进入项目目录,执行以下命令发布: ``` npm login npm publish ``` 其中,npm login需要输入用户名、密码和邮箱,npm publish会将当前目录下的文件发布npm。 5. 使用组件 其他项目可以使用npm install命令安装my-component-library: ``` npm install my-component-library ``` 然后,在需要使用的组件中引入组件,并注册组件即可: ```js import Vue from 'vue' import MyComponentLibrary from 'my-component-library' Vue.use(MyComponentLibrary) // 或者 import HelloWorld from 'my-component-library/src/components/HelloWorld.vue' Vue.component('HelloWorld', HelloWorld) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值