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

第

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

目录手动搭建一个用于测试组件库组件Vue3项目初始化ts搭建一个基于vite的vue3项目安装插件配置vite.config.ts新建入口html文件app.vue入口main.ts配置脚本启动项目

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

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

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

pnpmaddvue@nexttypescriptless-D-w

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

初始化ts

在根目录执行npxtsc--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的文件夹然后初始化pnpminit,后续的组件调试就在这个项目下进行。接下来我们就开始搭建一个Vue3+Vite的项目

安装插件

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

pnpmaddvite@vitejs/plugin-vue-D

配置vite.config.ts

新建vite.config.ts配置文件

import{defineConfig}fromvite;

importvuefrom@vitejs/plugin-vue;

exportdefaultdefineConfig({

plugins:[vue()],

新建入口html文件

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

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8/

metahttp-equiv=X-UA-Compatiblecontent=IE=edge/

metaname=viewportcontent=width=device-width,initial-scale=1.0/

titleplay/title

/head

body

divid=app/div

scriptsrc=main.tstype=module/script

/body

/html

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

app.vue

新建app.vue文件

template

div启动测试/div

/template

入口main.ts

新建main.ts

import{createApp}fromvue;

importAppfrom./app.vue;

constapp=createApp(App);

app.mount(#app);

配置脚本启动项目

在package.json配置scripts脚本

{

name:play,

version:1.0.0,

description:,

main:index.js,

scripts:{

dev:vite

keywords:[],