基于vite + Vue3.2 组件开发 并发布 npm 包

最新推荐文章于 2024-07-10 13:14:30 发布
最新推荐文章于 2024-07-10 13:14:30 发布
阅读量945 收藏 2
点赞数 1
文章标签： npm vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53312997/article/details/126631365
版权
本文介绍了如何使用Vite和Vue3.2进行组件开发，并详细讲解了项目的目录结构、配置文件设置，包括package.json和vite.config.js的配置。最后，阐述了如何将开发的组件发布到npm以及后续的使用方法。
摘要由CSDN通过智能技术生成

新建vite 项目就不多说了

目录结构

button组件 index.js Input组件下的 index.js也是一样的 这里就不一 一截图了

而在 packages 下也有一个 index.js 作为引入组件的入口文件

配置完成后

npm build 打包

会多出来一个 dist 目录

package.json 配置

{"name": "名称",//打包的名称"private": f
最低0.47元/天 解锁文章
AIGC小陈
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite搭建Vue3 + TypeScript 项目(NPM)
HUMM
11-04 953
NPM搭建Vite + Vue3 + TypeScript 项目
npm基于vite制作自己的npm包+ts超详细
07-28
总结来说，这个项目展示了如何利用现代前端技术栈，包括Vue3、TypeScript和Vite，来创建一个高效、可维护的自定义播放器，并通过npm将其发布为一个可复用的包。通过理解这些核心技术和配置文件的作用，开发者可以更...
Vue3 + Vite 打包发布至 npm 流程
wxid_mtnujb6ipc0322的博客
11-02 4284
随着 Vue.js 3.0 的正式发布，Vue 生态系统也进入了一个新的阶段。在 Vue.js 3.0 中，Vite 成为了默认的开发工具，并替代了 Vue CLI 作为推荐的构建工具。同时，NPM 作为 JavaScript 包管理器，对于开发者来说也是一个必备的工具。那么本文将介绍如何使用 Vue3、Vite 和 NPM 打包并发布一个 Vue 组件。
vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。
三拾的博客
03-13 4465
当我们项目中用到的表格太多的话，就会导致我们的代码量一直增加，所以我们要封装一个公共得组件，通过传参引入来使用，下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。
如何配置npm使用最新的国内淘宝镜像源的详细教程：提高包管理速度
最新发布
科技改变人类，技术成就未来
07-10 2078
在Node.js开发中，npm（Node Package Manager）是一个不可或缺的工具，但在国内使用npm默认配置通常下载速度较慢。本文详细介绍了如何配置npm使用最新的淘宝镜像源（https://registry.npmmirror.com/），以大幅提高包下载和安装速度。我们将逐步讲解如何通过设置npm registry、安装并使用cnpm工具、以及使用nrm工具来管理和切换多个npm镜像源。此外，还包括清理npm缓存以避免可能的缓存问题。
使用vite构建一个自己的vue3.0的UI组件库，并发布到npm
彭于晏(连云港分晏)
06-18 7842
自定义UI组件库使用vite使用npm工具 运行以下命令。编写DIY组件Button自己写第一个组件库之Button使用rollup打包库安装 使用rolluppackage.jsrollup.config.js发布包到npm注册npm账号使用npm 发布如何使用在项目中导入在app.vue 中使用，测试样式生效，组件引用成功。 使用vite vite是尤雨溪大大新写的工具，代替webpack，具体优点就不一一赘叙了，反正就是快。 使用npm工具 运行以下命令。 我在npm install 的时候出错了，换
Vite 组件化开发
DTCloud
06-26 133
Vite 是一个基于 ES 模块的构建工具，旨在提供快速、轻量级的开发体验。与传统的打包工具不同，Vite 利用浏览器原生支持的模块加载能力，实现了更快的冷启动和热模块替换。它支持 Vue.js、React 和其他前端框架，并且具有开发服务器和优化的构建配置，可以大大提升前端项目的开发效率。
vite 开发并打包 npm库文件。
悠悠清闲人的技术博客
04-25 1155
没卵用的时候，还得去翻找rollup-plugin-typescript2，虽然安装对于我们来说很快，但还是要很多设置的。最后就是当你的库编写的差不多的时候，直接build了，他的默认打包在/dist文件夹下的。而默认Vanilla 是没有vite.config.js的，所以在根目录新建一个即可。当然更多的文档里有，比如文件拆分，相对于其他的来说，这点配置就是毛毛雨。代表打包后库的名字，就是引入文件后的变量名，这样就指定了npm提交的文件夹，对了，的库模式是一个非常好的选择。，就是你打包后文件的名字。
Vue3.x快速上手（三）Vite脚手架之组件开发
qq_33070437的博客
11-11 1146
Vite学习 创建Vite脚手架 安装Vite 用node装确保更新npm版本 npm init @vitejs/app 也可以使用yarn安装 yarn create @vitejs/app 取名字 选开发技术 选js或ts 安装依赖 运行 npm run dev ...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
vite+vue+cesium项目搭建
03-13
1. **创建Vue模板**：首先，你需要通过npm或yarn创建一个基于Vue的Vite项目。对于npm 6.x，命令是`npm init vite@latest my-vue-app --template vue`；对于npm 7+，由于命令行语法变化，需要添加额外的双破折号，即`...
vite+vue2的项目基础包
06-17
Vite是Vue.js官方推出的一款现代化的前端构建工具，它采用了与传统Webpack不同的工作方式，提供了更快的开发环境启动速度和热更新体验。Vue2则是Vue.js框架的第二代版本，稳定且广泛应用于各种项目中。这个“vite+...
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vue3 + vite npm 组件库开发(三)
weixin_44588893的博客
03-02 356
组件库编写文档可能会用到很多的demo，很多的情况下，手动去引入太繁琐,编写一个脚本去生成
Vite+Vue3+TS打包一个npm组件，并支持IDE的代码提示功能
写好每一行代码
11-01 1425
Vite+Vue3+TS打包npm组件并上传到npm官网，同时希望组件在使用时，组件的各参数可以被ts识别，且在ide中有正确提示；
Vite - 开发初体验，以及按需导入配置
CYK_byte的博客
06-09 1965
a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.
【npm】基于vite制作自己的npm包+ts【超详细】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
07-19 1194
头脑一热想做自己的npm包，但是又无从下手，于是我找到了度娘…看着别人做挺简单，自己上手真难受。一路的坑。注意事项也挺多的，所以我特地详细介绍如何制作自己的npm包，并附上ts类型检测。提升用户体验感。初次踩坑，我的项目中，
使用vite框架封装vue3插件，发布到npm
任磊
01-15 2117
开发vue3组件配置
记录vite打包并上传到npm
weixin_50760181的博客
04-10 498
这里说一下files这个很重要 因为没有这个到时候会把所有的文件都传到npm上、其次private一定要设置false 如果需要直接访问你包下的文件一定不要exports这个选项、这里说一下我是用nrm切换 直接全局下载nrm之后百度搜怎么用就可以。npm官网地址 没有账号的自己去注册。
vite+vue3+ts怎么打包
05-18
打包vite + vue3 + ts的项目，可以使用vite所提供的build命令进行打包。 1. 首先，需要在项目根目录下安装vite的构建插件： ``` npm install @vitejs/plugin-vue@next @vitejs/plugin-typescript@next -D ``` 2. 在项目根目录下创建vite.config.ts文件，配置构建选项： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ts from '@vitejs/plugin-typescript' export default defineConfig({ plugins: [ vue(), ts() ], build: { outDir: 'dist', // 打包输出目录 target: 'es2015', // 浏览器兼容性 minify: 'terser' // 代码压缩 } }) ``` 3. 在package.json文件中添加打包命令： ``` "scripts": { "build": "vite build" } ``` 4. 运行打包命令： ``` npm run build ``` 打包完成后，会在项目根目录下生成一个dist目录，里面包含了打包后的静态文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值