vue3使用Vite打包组件库从0搭建过程详解

更新时间：2023年02月17日 15:08:28 作者：东方小月

这篇文章主要为大家介绍了vue3使用Vite打包组件库从0搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

手动搭建一个用于测试组件库组件 Vue3 项目

本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目

因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理

pnpm add vue@next typescript less -D -w

使用pnpm如果要安装在项目根目录下,则需要加-w

初始化 ts

在根目录执行npx tsc --init,然后就会自动生成 ts 的配置文件tsconfig.json,然后我们对其做一个更换

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "strict": true,
    "target": "ES2015",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "lib": ["esnext", "dom"]
  }
}

tsconfig.json暂时先做这样一个配置,后续可能会有一定的调整

搭建一个基于 vite 的 vue3 项目

因为我们要开发的是一个 Vue3 组件库,肯定需要一个 Vue3 项目来测试我们的组件库,所以这里将自己搭建一个基于 Vite 的 Vue3 项目来对组件进行调试。因此我们在根目录新建一个叫 play 的文件夹然后初始化pnpm init,后续的组件调试就在这个项目下进行。接下来我们就开始搭建一个 Vue3+Vite 的项目

安装插件

我们需要安装vite和vitejs/plugin-vue插件,@vitejs/plugin-vue插件是为了解析后缀为.vue文件的。在 play 目录下执行

pnpm add vite @vitejs/plugin-vue -D

配置 vite.config.ts

新建vite.config.ts配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
});

新建入口 html 文件

@vitejs/plugin-vue会默认加载 play 下的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>play</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.ts" type="module"></script>
  </body>
</html>

因为 vite 是基于 esmodule 的,所以script标签中需要添加type="module"

app.vue

新建app.vue文件

<template>
  <div>启动测试</div>
</template>

入口 main.ts

新建main.ts

import { createApp } from "vue";
import App from "./app.vue";
const app = createApp(App);
app.mount("#app");

配置脚本启动项目

在package.json配置scripts脚本

{
  "name": "play",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.1"
  }
}

因为 play 项目需要测试本地的组件库,所以也需要将 play 和我们的组件库关联在一起。修改一下pnpm-workspace.yaml文件

packages:
  - "packages/**"
  - "play"

此时 play 项目便可以安装本地 packages 下的包了

最后执行pnpm run dev,便可启动我们的 play 项目

但是有一个问题就是 ts 无法识别*.vue文件,所以编译器会报红

此时我们需要新建一个声明文件vue-shim.d.ts,让 ts 认识*.vue的文件

declare module '*.vue' {
    import type { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>
}

此时报错便消失了。

到这里我们就完成一个 Vue3 项目的搭建,后续便可以在这个项目中进行本地组件的调试了

本篇文章仓库地址:配置环境

以上就是vue3使用Vite打包组件库从0搭建过程详解的详细内容，更多关于vue3 Vite打包组件库搭建的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue上传图片组件编写代码
这篇文章主要为大家详细介绍了vue上传图片组件的编写代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue 解决在微信内置浏览器中调用支付宝支付的情况
这篇文章主要介绍了vue 解决在微信内置浏览器中调用支付宝支付的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
基于vue实现分页/翻页组件paginator示例
本篇文章主要介绍了基于vue实现分页/翻页组件paginator示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
在Vue渲染模板时保留HTML注释的方法
在使用 Vue.js 进行开发时,模板中的 HTML 注释通常会被 Vue 的编译器自动移除,然而,在某些情况下,我们可能希望保留这些注释,例如为了调试、文档生成或其他特殊需求,本文将详细介绍如何在 Vue 渲染模板时保留 HTML 注释,并提供相关的代码示例,需要的朋友可以参考下
2025-03-03
vue实现手机号码抽奖上下滚动动画示例
本篇文章主要介绍了vue实现手机号码抽奖上下滚动动画示例。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue实现顶部菜单栏
这篇文章主要为大家详细介绍了vue实现顶部菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
Vue3源码分析组件挂载初始化props与slots
这篇文章主要为大家介绍了Vue3源码分析组件挂载初始化props与slots实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
Vue状态机的开启与停止操作详细讲解
Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
2023-01-01
vue项目用后端返回的文件流实现docx和pdf文件预览
本文主要介绍了vue项目用后端返回的文件流实现docx和pdf文件预览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vue3组件不发生变化如何监听pinia中数据变化
这篇文章主要给大家介绍了关于Vue3组件不发生变化如何监听pinia中数据变化的相关资料,pinia是Vue的存储库,它允许您跨组件/页面共享状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11