当前位置: 首页 > news >正文

vite构建Vue3项目:封装公共组件,发布npm包,自定义组件库

文章目录

  • 前言
  • 一、创建基础的vite 脚手架
  • 二、文件结构
  • 编写组件代码,本地测试
  • 配置项
  • 打包npm发布
  • npm下载使用
  • 总结


前言

使用vue开发组件封装是一个很普遍的事情了,封装好一个组件可以在项目的任意地方去使用,我们还可以从npm仓库下载别人封装的组件进行使用,比如element-ui,vant,antd,echarts等组件库,但是由于不同的公司,不同的网站风格,是我们在开发中还是得自己封装自己的组件,要想在不同项目上使用自己封装的组件,不可能去旧项目复制组件代码到新的项目里面去。所以我们可以将组件上传到npm仓库,使用的时候直接从npm安装使用。


一、创建基础的vite 脚手架

npm create vite  vite-demo(项目名称) --template vue 
  •   下载依赖:npm i
  •    启动项目:npm run dev

二、文件结构

  • 在根目录下新建一个packages文件夹,文件夹下的分别是zd-vin(自定义名称)和index.js。packages的主要作用就是放我们的公共组件,后续导出的,index.js内将导入zd-vin下的全部组件。

三、编写组件代码,本地测试

  • 在zd-vin文件夹下创建你的第一个组件(zd-Button.vue)
  • <script setup>
    /*** 接收传过来的值** @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini'* @param type 定义按钮的类型 默认不填*/
    defineProps({size: {type: String,default: "middle",},type: {type: String,default: "default",},
    });
    </script>
    <script>
    export default {name: "zd-Button",
    };
    </script><template><button class="muk-btn" :class="[size, type]"><!-- 定义插槽用于让用户自定义按钮你们的内容 --><slot></slot></button>
    </template><style scoped lang="less">
    .muk-btn {appearance: none;border: none;outline: none;background: #fff;text-align: center;border: 1px solid transparent;border-radius: 4px;cursor: pointer;
    }.large {width: 240px;height: 50px;font-size: 16px;
    }.moddle {width: 180px;height: 50px;font-size: 16px;
    }.small {width: 100px;height: 32px;
    }.mini {width: 60px;height: 32px;
    }.default {border-color: #e4e4e4;color: #666;
    }.primary {border-color: skyblue;background: skyblue;color: #fff;
    }.plain {border-color: skyblue;color: skyblue;background: lighten(skyblue, 50%);
    }.gray {border-color: #ccc;background: #ccc;color: #fff;
    }
    </style>
    

    在package文件下新建index.js用于导出组件

  • import { defineAsyncComponent } from "vue";const components = import.meta.glob("./zd-vin/*.vue");
    const registerGlobalComponent = (app) => {for (const [key, value] of Object.entries(components)) {const name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));app.component(name, defineAsyncComponent(value));}
    };export default registerGlobalComponent;
  •  本地测试
    src\main.js注册组件
    import { createApp } from "vue";
    import App from "./App.vue";
    import registerGlobalComponent from "../packages/index";const app = createApp(App);
    registerGlobalComponent(app);
    app.mount("#app");
  • src\App.vue里面去使用按钮
    <template><zd-Button size="small" type="primary">我的按钮</zd-Button>
    </template>
     

四、配置项

  • 在项目的根目录的vite.config.js修改相关配置,修改成组件库打包模式,
    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import path from "path";// https://vite.dev/config/
    export default defineConfig({plugins: [vue()],build: {outDir: "zd-vin-package", //输出文件名称lib: {entry: "./packages/index.js", //指定组件编译入口文件name: "zd-vin-package",fileName: "zd-vin-package",}, //库编译模式配置rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue"],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: "Vue",},},}, // rollup打包配置},
    });

五、打包npm发布

  • 在终端使用npm run build 如下图所示出现以下文件就打包成功了
  • 发布前还需要做一下准备?

  1. 配置package.json

    首先我们在打包好的zd-vin-package目录下,打开终端,然后执行npm init -y命令初始化package.json

  2. 配置内容

    {"name": "zd-vin-package",   //组件库名称"private": false,       "version": "1.0.0",       //版本号"description": "我创建的第一个组件库", //描述"main": "zd-vin-package.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},//keywords 用来npm 库搜索关键词"keywords": ["zd","zd-vin","ZD","ZD-VIN","zd-vin-package"],"author": "","license": "ISC"
    }
  3. 创建npm 账号
    ​​​​​https://www.npmjs.com/   注册完成记得自己的账号,密码,邮箱,后续发布验证需要邮箱!

  4. 设置npm 源 因为之前大部门朋友设置的是淘宝镜像现在需要恢复成npm源

    npm config set registry=https://registry.npmjs.org
    

     5. 在打包好的文件zd-vin-package下命令行输入

npm adduser

添加自己的账号

打开刚刚邮箱输入验证码

 6. 输入:

npm publish --access=public

发布npm (切记:上面的zd-vin-package一定要自定义名称,文件名称重复会导致发布失败)

如果以上命令无法实现可以尝试使用下面的命令:

npm login
npm publish

发布成功后可以去https://www.npmjs.com/ 查看:


                

六、npm下载使用

可以再次通过vite创建一个项目或者直接在已有项目中安装发布的组件

npm install zd-vin-package


import "zd-vin-package/style.css"; //引入组件样式
import ZD from "zd-vin-package"; //引入下载后的组件const app = createApp(App);
app.use(ZD); //注册

代码中使用

  <zd-Button size="small" type="primary">我的按钮1</zd-Button>

总结

大概就是如此吧!有问题可以评论,私信-----ps写完了,外面雨也下大了;雨一直下,希望大家一切都很融洽~


http://www.mrgr.cn/news/62807.html

相关文章:

  • 【python 将数据写入csv文件】正确方式
  • 使用 BERT 和逻辑回归进行文本分类及示例验证
  • 理解 Vue 的单向数据流
  • 「动态规划」1/n:什么是动态规划?
  • 【GL07】C语言要点
  • Unix和Linux系统中的文件权限
  • 利用GATK对RNA-seq数据做call SNP 或 INDEL分析
  • VScode + PlatformIO 了解
  • 案例精选 | 石家庄学院大日志场景下的实名审计实践
  • Rust: 加密算法库 ring 如何用于 RSA 数字签名?
  • 罗马仕、西圣、安克充电宝哪款品牌更好?综合测评对比谁是TOP.1
  • 为Meta Spark准备3D模型
  • vue简介
  • 从0开始学习shell脚本
  • JS面试八股文(四)
  • windows环境下,使用docker搭建redis集群
  • java程序打包为一个exe程序
  • Python import package
  • [TypeError]: type ‘AbstractProvider‘ is not subscriptable
  • 深入理解Java中的static关键字
  • Ubuntu环境本地部署DbGate数据库管理工具并实现无公网IP远程访问
  • [GXYCTF2019]Ping Ping Ping 1
  • SQL中`ORDER BY`、`SORT BY`、`DISTRIBUTE BY`、`GROUP BY`、`CLUSTER BY`的区别详解
  • Spring JdbcTemplate详解
  • C/C++ 矩阵的QR分解
  • WPF中如何解决引入MvvmLight所导致的错误